HTML canvas rect() Method | w3school canvas
❮HTMLCanvasReference[1]ExampleDrawa150*100pixelsrectangle:YourbrowserdoesnotsupporttheHTML5canvastag.JavaScript:varc=document.getElementById("myCanvas");varctx=c.getContext("2d");ctx.beginPath();ctx.rect(20,20,150,100);ctx.stroke();TryitYourself»[2]BrowserSupportThenumbersinthetablespecifythefirstbrowserversionthatfullysupportsthemethod.Methodrect()Yes9.0YesYesYesDefinitionandUsageTherect()methodcreatesarectangle.Tip:Usethestroke()[3]orthefill()[4]methodtoactuallydrawtherectangleonthecanvas....
❮ HTML Canvas Reference[1]
ExampleDraw a 150*100 pixels rectangle:
YourbrowserdoesnotsupporttheHTML5canvastag.JavaScript:
var c = document.getElementById("myCanvas");var ctx = c.getContext("2d");ctx.beginPath();ctx.rect(20, 20, 150, 100);ctx.stroke();
Try it Yourself »[2] Browser SupportThe numbers in the table specify the first browser version that fully supports the method.
Method rect() Yes 9.0 Yes Yes Yes Definition and UsageThe rect() method creates a rectangle.
Tip: Use the stroke()[3] or the fill()[4] method to actually draw the rectangle on the canvas.
JavaScript syntax: context.rect(x,y,width,height); Parameter Values Parameter Description Play it x The x-coordinate of the upper-left corner of the rectangle Play it »[5] y The y-coordinate of the upper-left corner of the rectangle Play it »[6] width The width of the ...