Add image to HTML5 Canvas from a file

Question

In HTML5 Canvas I am trying to add and image. The line:

 imageObj.src = 'file://C:/Users/User/Documents/Image File/image1.jpg';

is not correct. How do I add a file to HTML5 Canvas Image?

  <canvas id="myCanvas" width="1000" height="1000"></canvas>
  <script>
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var imageObj = new Image();
        imageObj.src = 'file://C:/Users/User/Documents/Image File/image1.jpg';
        imageObj.onload = function () {
            context.drawImage(imageObj, centerX, centerY);
        };
   </script>

Try placing imageObj.src = 'file://C:/Users/User/Documents/Image File/image1.jpg'; after imageObj.onload = function(){} — guest271314
– guest271314, Commented Apr 21, 2016 at 14:13
Right click on the image and open it in browser, copy the path and set it in imageObj.src. — Sahil
– Sahil, Commented Apr 21, 2016 at 14:22
The above method will give you the absolute path of the image. — Sahil
– Sahil, Commented Apr 21, 2016 at 14:29
This one may help you to build relative path: <stackoverflow.com/questions/703281/…> — romabr
– romabr, Commented Apr 21, 2016 at 14:33

Sahil · Accepted Answer · 2016-04-21 14:40:03Z

The below example will explain how to use relative paths.

Assume the project structure is like this:

project(think of this as root)/
    |->index.html
    |->css/
      |->main.css
    |->images/
      |-> cartoon.jpg
    |->cat.jpg
    |->other_pages/
      |->about.html
      |->contact.html

Now if we are in index.html page and we should set the image src as:

img = new Image();
cat = new Image();

//accessing cat.jpg
cat.src = "cat.jpg";

//accessing cartoon.jpg
img.src = "images/cartoon.jpg";

Now lets move to about.html page, here we can access the images in the following manner:

img = new Image();
cat = new Image();

//accessing cat.jpg
cat.src = "../cat.jpg";

// accessing cartoon.jpg
img.src = "../images/cartoon.jpg";
// here .. signifies moving one step back
//.. is similar to executing **cd ..** in command line.

For absolute path try this:

Right click on the image and open it in browser, copy the path and set it in imageObj.src (you can use this method if you are working in local environment and want to test it out with few of your local images.)

ZapZap · Accepted Answer · 2016-04-21 14:15:41Z

1

imageObj.src should be a relative path. For example to an image in the same path, if would be something like imageObj.src = 'image1.jpg'; Path is relative to the html file that is running.

answered Apr 21, 2016 at 14:15

ZapZap

564 bronze badges

4 Comments

losopha Over a year ago

How do you set the relative path?

ZapZap Over a year ago

Let's say you run an html inside /root folder. And you have an image in /root/images folder. You could do imageObj.src = '/root/images/image1.jpg'

Sahil Over a year ago

Then the image path should be images/image1.jpg as the html page is also in the root folder.

ZapZap Over a year ago

You're right, it could be images/image1.jpg and /images/image1.jpg, but not /root/images/image1.jpg

Collectives™ on Stack Overflow

Add image to HTML5 Canvas from a file

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related