<canvas> Tag Examples

Examples of the canvas tag in HTML 5
Hello World! demo of <canvas> tag with gradients and drop shadow
(see <canvas> tag demo above)
<canvas id="ex1canvas" width="265" height="55" style="border: 1px solid black"/>
<iframe src="about:blank" width="0" height="0"
   onload="ctx=document.getElementById('ex1canvas').getContext('2d');
      ctx.clearRect(0, 0, 265, 55);
      ctx.textBaseline = 'top';
      ctx.shadowOffsetX = 6;
      ctx.shadowOffsetY = 6;
      ctx.shadowBlur = 6;
      ctx.shadowColor = '#000000';
      ctx.font = 'normal 36px sans-serif';
      ctx.strokeStyle = '#006600';
      ctx.strokeText('Hello', 12, 4);
      ctx.font = 'bold 36px sans-serif';
      grad = ctx.createLinearGradient(100, 0, 220, 0);
      grad.addColorStop(0.0, '#000033');
      grad.addColorStop(0.2, '#6699ff');
      grad.addColorStop(0.4, '#003366');
      grad.addColorStop(0.6, '#6699ff');
      grad.addColorStop(1.0, '#000033');
      ctx.fillStyle = grad;
      ctx.fillText('world!', 100, 4);
      grad = ctx.createRadialGradient(227, 15, 5, 235, 25, 24);
      grad.addColorStop(0, 'rgba(198, 198, 255, 1.0)');
      grad.addColorStop(0.9, 'rgba(0, 50, 255, 1.0)');
      grad.addColorStop(1, 'rgba(0, 50, 255, 0)');
      ctx.fillStyle=grad;
      ctx.fillRect(209, 0, 260, 50);"
/>

The radial gradient creates both the blue sphere and the glow on it.

More sophisticated shapes, such as the hexagon in the <canvas> demo below, can be created using the methods beginPath, moveTo, lineTo repeated two or more times and closePath.