How to Set image width and length using HTML5 Canvas
The main discussion point of this tutorial is By using html5 canvas how to edit or set any image width as well as its length. The discussion of our previous tutorial is how to draw image using html5 canvas. Now to edit the image width and length using HTML5 Canvas ,the code is given below.
var imgObj =new Image();In this code x is x-coordinate of image placement, and y is y-coordinate of image. If we want to edit image size i.e image width and length using html5 canvas element.The code for drawing image using html5 canvas element will be:
In this syntax
drawImage( ) method takes five parameters
x-coordinate of image placement.
y-coordinate of image placement.
width of image
height of image
However If you need to study html5 canvas with the help of video tutorials then watch html5 canvas course tutorials whish are also available in our youtube channel as well as pasted below. youtube channel of theiteducation.
How to set size of image using html5 canvas element | code example
<!DOCTYPE html> <html> <head> <title>how to set image width and height using html5 canvas</title> </head> <body> <canvas id ="myCanvas" width ="600" height ="400" style="border: 1px solid blue;" > </canvas> <script> var canvas = document.getElementById("myCanvas"); var context =canvas.getContext('2d'); var imgObj =new Image(); imgObj.src='http://www.learnhtml5canvas.com/wp-content/uploads/2015/01/rainbow.png'; context.drawImage(imgObj, 50,50,300,300);; </script> </body> </html>