Canvas entry 04-draw a rectangle

APIs used:

• CTX. strokerect (X, Y, width, height) to a rectangular stroke
• CTX. fillrect (X, Y, width, height) fills in a rectangle
• CTX. clearrect (X, Y, width, height) clears the rectangular area
• CTX. linejoin = 'round '| 'bevel' | 'miter' defines the style of the line intersection.

VaR canvas = document. getelementbyid ('canvas '), context = canvas. getcontext ('2d '); canvas. width = 1024; canvas. height = 768; // CTX. linejoin = "bevel" | "round" | "miter"; context. linejoin = 'round '; // draw the rounded rectangle context. linewidth = 30; context. font = '24px Helvetica '; context. filltext ('click anywhere to erase', 175,200); context. strokestyle = 'goldenrod '; // use chrysanthemum to draw context. fillstyle = 'rgba (255, 0.5,) '; // fill the context with translucent blue. strokerect (1, 75,100,200,200); context. fillrect (1, 325,100,200,200); context. canvas. onmousedown = function (e) {context. clearrect (0, 0, canvas. width, canvas. height );}

 

Display Effect:

 

When you click any position on the canvas, the rectangle and text will disappear.

 

Canvas entry 04-draw a rectangle