canvas tutorial - gradients and shadows

by Amanda Williamson

HTML

<canvas id="canvas" width="600" height="600"></canvas>

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

//Linear Gradient
/*ctx.rect(0, 0, 200, 300);
var grd1 = ctx.createLinearGradient(0, 0, 200, 300);
grd1.addColorStop(0, '#FAE6FF');   
grd1.addColorStop(1, '#BA55D3');
ctx.fillStyle = grd1;
ctx.fill();*/ 

//Radial Gradient
ctx.arc(200, 200, 200, 0, 2 * Math.PI, false);
var grd2 = ctx.createRadialGradient(238, 50, 10, 238, 50, 300);
grd2.addColorStop(0, '#8ED6FF');   
grd2.addColorStop(1, '#004CB3');
ctx.fillStyle = grd2;
ctx.fill();

//Shadow
/*ctx.rect(50, 50, 200, 100);
ctx.fillStyle = 'hotpink';
ctx.shadowColor = 'mediumvioletred';
ctx.shadowBlur = 14;
ctx.shadowOffsetX = -12;
ctx.shadowOffsetY = 13;
ctx.fill();*/