How to Set image using HTML5 Canvas

Business Software and Office Automation

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();
imgObj.src='Imageurl';
context.drawImage(imgObj,x,y);


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:

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.

Author: Habibullah Qamar

Its me Habib Ullah Qamar working as a Lecturer (Computer Sciences) in Pakistan. I have an MS(M.Phil) degree in computer sciences with specialization in software engineering from Virtual University of Pakistan Lahore. I have an experience of more than 15 years in the filed of Computer Science as a teacher. Blog Writing is my passion. I have many blogs, This one is special made with the aim of providing 100% Free online coaching and training to the students of under-graduate and postgraduate classes. Most of the students enrolled in computer sciences, information technology, software engineering and related disciplines find it difficult to understand core concepts of programming and office automation. They find difficult in understanding and solving their assignments.

Leave a Reply

Your email address will not be published. Required fields are marked *