HTML5 Canvas Rectangles and Styles

Fill the element

context.fillStyle = "yellow"
context.fill();
let canvas = document.getElementById('c1');
let context = canvas.getContext("2d");

window.onload = function () {
context.strokeStyle = "green";
context.lineWidth = 4;
context.lineJoin = "round";
context.fillStyle = "yellow";
context.rect(10,10, 50, 50);
context.stroke();
context.fill();
}
Filled rectangle
context.fillStyle = "green";
context.fillRect(65, 10, 50, 50);
fillRect function

Draw rectangle without background

context.lineWidth = 1;
context.strokeStyle = "red";
context.lineJoin = "round";
context.strokeRect(120, 10, 50, 50);
Not filled rectangle

Clear function

context.clearRect(5, 5, 20, 20);
Clear a part
context.clearRect(0, 0, 1000, 1000);

Result

Result

Thank you for your attention.

Senior web developer, architect, cryptocurrencies trader, https://lytvynov-anton.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store