This topic explains how to draw a shape on the canvas and how to move this shape. This topic includes the demo and the complete code with explanation. Continue reading “How to move an object on the HTML5 canvas”
Tag: canvas in html5
Show image into a circle shape in HTML5
This article will show that how you can show an image into a circle shape using the below code. The following example is using the canvas element and canvas arc() method to create a circle to show the image.
<!DOCTYPE html> <html> <head> <script type="text/javascript"> var myImage = new Image(); function displayImage() { canvas = document.getElementById("myCanvas"); if (canvas.getContext) { ctx = canvas.getContext("2d"); myImage.onload = function() { ctx.drawImage(myImage, 0, 0); ctx.strokeStyle = "white"; ctx.lineWidth = "100"; ctx.beginPath(); ctx.arc(100, 100, 150, 0, Math.PI * 2, true); ctx.closePath(); ctx.stroke(); } myImage.src = ""; } } </script> </head> <body onload="displayImage()"> <canvas id="myCanvas" width="200" height="200"> </canvas> </body> </html>
First we initialte a image object then We use the arc() method to draw the circle shape(same as we have done in the previous article – draw smiley in html5) and in the last set the src attribute to image object to display the image in the circle.
Draw smiley in HTML5
This article demonstrate how can you draw smileys in your HTML5 document. The article also covers the how to draw an arc and fill with gradient color. Continue reading “Draw smiley in HTML5”
Draw and Fill a polygon and triangle in HTML5
In HTML 5, we can draw the 2D shape very easily with the help of the canvas element. In the following example demonstrate how to draw a simple polygon shape. Continue reading “Draw and Fill a polygon and triangle in HTML5”