Sunwell - A Hearthstone cards renderer

Render hearthstone cards in high resolution!

What is this sorcery?

Sunwell is a javascript (HTML5 canvas) based renderer for Hearthstone cards.
You give it a card object and a resolution, and it does the rest.

Sunwell is open source and is hosted on github.
Want to see what it does? Check out my high resolution cards database! All cards there are rendered dynamically in your browser through sunwell.


Sunwell is able to render Hearthstone cards as (static) bitmaps with a resolution up to 1100x764px. Thats actually 2x the resolution the game itself is capable to render!

This is possible because I reworked all the game assets in photoshop and upscaled a lot of card assets using the waifu2x algorithm.

Click on the Leeroy Jenkins example to see a full resolution example of a card rendered by sunwell. The example is lossy compressed - you can have a look into the "cards section" of the HS Labs page to get more examples.

How to use

Grab yourself a copy of the github repository and set everything up.
Keep in mind that you still need to extract the card artworks from the game files.

Load the web fonts, used on your rendered cards through CSS, or even better: google font loader.
Set up sunwell with your own settings before loading the library itself:

    window.sunwell = {
        settings: {
            titleFont: 'Belwe',
            bodyFont: 'ITC Franklin Condensed',
            bodyFontSize: 24,
            bodyLineHeight: 55,
            bodyFontOffset: {x: 0, y: 0},
            assetFolder: '/assets/',
            textureFolder: '/artworks/',
            smallTextureFolder: '/smallArtworks/',
            autoInit: false,
            debug: false
<script src="sunwell.js">

If you set autoInit to false - which I recommend; sunwell will wait with the rendering of any cards until you call sunwell.init(). Call this methods when your web fonts have been loaded.

After being loaded, sunwell will provide the methods to the global object sunwell for you to interact with and generate cards from.

To render our Leeroy Jenkins example, simply do this:

var cardObj = {
    "name":"Leeroy Jenkins",
    "text":"<b>Charge</b>. <b>Battlecry:</b> Summon two 1/1 Whelps for your opponent.",
var resultImg = document.getElementById('myResultImage');

sunwell.createCard(cardObj, 764, resultImg);

Yup, thats it. The cardObj was taken from the HearthstoneJSON API - and I stripped away a couple of properties, that are not needed for sunwell. You can leave them in place if you want to - sunwell will ignore everything thats not of interest.

If you need more information, please head over to the github project of sunwell.

Hey! I want to tell you something!