Canvas sample

by Ilia Tretiakov

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
<canvas id="myCanvas" width="600" height="600" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>

JavaScript

if(Modernizr.canvas != true){
    return;
}

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

var g1 = ctx.createRadialGradient(160, 120, 0, 320, 220, 300);
g1.addColorStop(0, '#fff');
g1.addColorStop(1, '#999');

ctx.lineWidth = 0;
ctx.strokeStyle = '#000';
ctx.fillStyle = g1;
ctx.beginPath();
ctx.arc(180, 180, 160, 0, Math.PI * 2, true);

ctx.fill();

var g2 = ctx.createRadialGradient(360, 320, 0, 260, 220, 200);
g2.addColorStop(0, '#fff');
g2.addColorStop(1, '#999');
ctx.fillStyle = g2;
ctx.beginPath();
ctx.arc(180, 180, 130, 0, Math.PI * 2, true);
ctx.fill();

ctx.fillStyle = '#fff';
ctx.font = '280px Arial';
ctx.fillText('C', 80, 280);