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:
imgObj.src='Imageurl';
context.drawImage(imgObj,x,y);
context.drawImage(imgObj,x,y,width,height);
In this syntax drawImage( )
method takes five parameters
- imgObj
image object.
- x
x-coordinate of image placement.
- y
y-coordinate of image placement.
- width
width of image
- height
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>
The html5 canvas library you can see below is the step by step video tutorials and lectures lsts covering all the topics of html5 canvas image annotation, html5 canvas drag and drop, html5 canvas layers and all the topics of html5 canvas javascript framework have been discussed.