<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
.
Interactive <canvas> tag demo
<canvas width="200" height="200" onmouseover="ctx=this.getContext('2d'); ctx.clearRect(0, 0, 200, 200); ctx.fillStyle='rgba(0,50,10,0.60)'; ctx.fillRect(0,0,200,200);" onclick="ctx=this.getContext('2d'); ctx.fillStyle='rgba(0,50,10,0.25)'; ctx.fillRect(50,50,100,100);" style="border: 1px solid black; background-color: #ccffcc" />
Here is an actual working example of the code above.
Mouse over and click the canvas demo below