Painting using Canvas and JS.

Lately I've been playing around with HTML5 and Canvas trying to render icons and graphics without the use of image files. This blog post is simply showing how to render the HTML5 logo using only code.

First up, we create a HTML5 canvas-tag where our logo will live. I’ll add some simple CSS to it for good measure, creating a circular form for our logo. We make sure to call our function rendering the logo as the page is loaded.

<canvas id="xpCanvasWeb" class="testblock" width="175" height="175"></canvas>

<style type="text/css">
.testblock {
    background: none repeat scroll 0 0 #2a2a2e;
    border: 1px solid #2a2a2e;
    border-radius: 115px;
    margin: 10px;
}
</style>

Now, for the rendering-function, please see my inline code. My approach towards this is to paint the logo in «layers», starting with the background and adding on layer by layer until the logo is complete. By using semi-transparent colors, we get the desired 3D-effect.

function xpCanvasWeb() {
    // We grab the canvas and context.
    var c = document.getElementById("xpCanvasWeb");
    var ctx = c.getContext("2d");

   //Adding color and filling a rect as background
    ctx.fillStyle = "#2a2a2e";
    ctx.fillRect(0, 0, 175, 175);

   // We want to be able to move our logo about without too much fuss, so we declare an x and y variable and add it in the rendering code.
   var x = 60;
   var y = 50;
   //We set the line width to 1 px.
   ctx.lineWidth = 1;

   //We begin by declaring the start of a path and setting the fill style.
   ctx.beginPath();
   ctx.fillStyle = "#E34C26";
   //Then we move into position and start drawing
   //Fig left
   ctx.moveTo(x, y);
   ctx.lineTo(x + 5, y + 57);
   ctx.lineTo(x + 28, y + 63);
   ctx.lineTo(x + 51, y + 57);
   ctx.lineTo(x + 56, y + 0);
   ctx.lineTo(x, y);
   ctx.fill();

   //Fig center
   ctx.beginPath();
   ctx.fillStyle = "#F06529";
   ctx.moveTo(x + 28, y + 4);
   ctx.lineTo(x + 28, y + 58);
   ctx.lineTo(x + 47, y + 53);
   ctx.lineTo(x + 51, y + 5);
   ctx.lineTo(x + 28, y + 5);
   ctx.fill();

   //Fig right
   ctx.beginPath();
   ctx.fillStyle = "rgba(255, 255, 255, 0.6)";
   ctx.moveTo(x + 46, y + 12);
   ctx.lineTo(x + 10, y + 12);
   ctx.lineTo(x + 12, y + 33);
   ctx.lineTo(x + 35, y + 33);
   ctx.lineTo(x + 35, y + 42);
   ctx.lineTo(x + 28, y + 45);
   ctx.lineTo(x + 21, y + 43);
   ctx.lineTo(x + 20, y + 37);
   ctx.lineTo(x + 13, y + 37);
   ctx.lineTo(x + 13, y + 48);
   ctx.lineTo(x + 28, y + 52);
   ctx.lineTo(x + 43, y + 48);
   ctx.lineTo(x + 45, y + 26);
   ctx.lineTo(x + 19, y + 26);
   ctx.lineTo(x + 19, y + 20);
   ctx.lineTo(x + 45, y + 20);
   ctx.lineTo(x + 45, + 12);
   ctx.fill();
}

The figure shows how the layers build up the logo for each time we call beginPath, add coordinates and call fill again.