You can draw curves with arc() An arc is a portion of a circle This is how well draw ◦ circles ◦ arc segments
Arc isnt easy to work witharc(x, y, radius, startAngle, endAngle, direction); Where: ◦ x, y: the center of the circle ◦ startAngle, endAngle: The angle in radians that the arc starts and ends. 0=straight left ◦ direction: true=counterclockwise & false=clockwise Example: circlectx.arc(x, y, radius, 0, Math.PI * 2, true); !
Sometimes,though, wejust need toput animage inour canvas
drawImage() allows us to include anexisting jpg, gif, or png Get the drawing firstvar vader = new Image();!vader.src = "images/vaderAttacks.jpg";! Draw image starting at (x, y)ctx.drawImage(vader, x, y);! Draw image starting at (x, y) and scale it to (w, h)drawImage(vader, x, y, w, h);!
Demo: Adding images toimagescanvas Hands-on adding your
Conclusion HTML5 canvas suddenly makes it possible to create drawings, games and other RIA without Flash, Silverlight or other plug-ins The low-level access to the canvass context allows you to draw just about anything We can include text and images in addition to rectangles, lines, and arcs