⚠ī¸ Warning ⚠ī¸ Deprecated Code! This video tutorial contains outdated code.
💡 If you wish to update it, any AI assistant will update the code for you in seconds.

Fill and Stroke Styles Color Gradient Pattern

Published : November 17, 2014   •   Last Edited : November 24, 2025   •   Author : Adam Khoury
In this second exercise we will be covering the fill and stroke styles we can apply to fills and strokes on our canvas. Learn about creating gradient fills, pattern fills and color settings. 
<!DOCTYPE html>
<html>
<head>
<style>
body{ margin:40px; background:#666; }
#my_canvas{ background:#FFF; border:#000 1px solid; }
</style>
<script>
var leather = new Image();
leather.src = "leather.jpg";
function draw(){
    var ctx = document.getElementById('my_canvas').getContext('2d');
    // alert(ctx.canvas.id+" | "+ctx.canvas.width+" | "+ctx.canvas.height);
    // fillStyle = color || hex || rgba() || gradient || pattern
    // createLinearGradient(x0, y0, x1, y1)
    // createRadialGradient(x0, y0, r0, x1, y1, r1)
    // createPattern(Image_Resource, repeat_setting)
    var g1 = ctx.createLinearGradient(0, 0, 200, 0);
    g1.addColorStop(0,"magenta");
    g1.addColorStop(0.5,"yellow");
    g1.addColorStop(1,"black");
    ctx.fillStyle = g1;
    ctx.strokeStyle = "red";
    ctx.lineWidth = 10;
    ctx.fillRect(0, 0, 200, 200);
    ctx.strokeRect(0, 0, 200, 200);
	
    var g2 = ctx.createRadialGradient(350, 100, 0, 350, 100, 200);
    g2.addColorStop(0,"magenta");
    g2.addColorStop(0.5,"yellow");
    g2.addColorStop(1,"black");
    ctx.fillStyle = g2;
    ctx.fillRect(250,0,200,200);
    ctx.strokeRect(250,0,200,200);
	
    var pattern = ctx.createPattern(leather, "repeat");
    ctx.fillStyle = pattern;
    ctx.fillRect(0,250,200,200);
    ctx.lineWidth = 20;
    ctx.strokeStyle = g1;
    ctx.strokeRect(0,250,200,200);
    ctx.fill();
}
window.onload = draw;
</script>
</head>
<body>
<canvas id="my_canvas" width="700" height="500"></canvas>
</body>  
</html>
▲