Adam Khoury

Donate funds to show love and support

Click the button below to donate funds securely online. You can use your PayPal account or a credit card.

Your donations help free up my time to produce more content and assist in covering server costs. It's also a great way to say thanks for the content!

Application Configuration

Adam will be adding options here soon.

Fill and Stroke Styles Color Gradient Pattern

Published :
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>