Tag

HTML5 canvas Archives - Crazy Education

Draw an image on HTML Canvas

By | HTML/CSS, JAVASCRIPT, JQUERY, Programming | No Comments

Canvas – Images To draw an image on a canvas, use the following method: drawImage(image,x,y) Source code: <!DOCTYPE html> <html> <body> <p><b>Image to show on canvas:</b></p> <img id=”scream” width=”220″ height=”180″ src=”pic_the_scream.jpg” alt=”The Scream”> <p><b>Selected Image on Canvas:</b></p> <canvas id=”myCanvas” width=”240″ height=”180″ style=”border:1px solid #d3d3d3;”> Your browser does not support the…

Read More

Different Types of Canvas Gradients Methods With Example

By | HTML/CSS, JAVASCRIPT, JQUERY, Programming | No Comments

Gradients can be used to fill rectangles, circles, lines, text, etc. Shapes on the canvas. There are two different types of gradients: createLinearGradient(x,y,x1,y1) – creates a linear gradient createRadialGradient(x,y,r,x1,y1,r1) – creates a radial/circular gradient For a gradient object, must have two colors. The addColorStop() method specifies the color stops, and…

Read More

How to draw Circle on Canvas

By | HTML/CSS, JAVASCRIPT, JQUERY, Programming | No Comments

To draw a circle on a canvas, use the following methods: beginPath(); arc(x,y,r,start,stop) Define a circle with the arc() method. Then use the stroke() method to actually draw the circle.   Source Code: <!DOCTYPE html> <html> <body> <canvas id=”myCanvas” width=”200″ height=”100″ style=”border:1px solid #d3d3d3;”> Your browser does not support the…

Read More