Click here to Skip to main content
15,903,523 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I am using HTML5 Canvas.
I would like to insert an image into myCanvas.

Here are the site I am using:

HTML5 Canvas Cheat Sheet[^]

HTML:
HTML
<canvas id="myCanvas" width="1000" height="1000"></canvas>


JavaScript:
JavaScript
var canvas = document.getElementById('myCanvas');
            var context = canvas.getContext('2d');
            var context1 = canvas.getContext('2d');
            var context2 = canvas.getContext('2d');
            var centerX = canvas.width / 2;
            var centerY = canvas.height / 2;

            var x = centerX;
            var y = centerY;
            var imageObj = new Image();
            imageObj.src = 'C:/Users/User/Documents/folder1/Image Folder/Image1.jpg';
            imageObj.onload = function () {
                context.drawImage(imageObj, x, y);
            };


What I have tried:

I have tried to add an image from <img> but I want to use a file.jpg.
Posted
Updated 20-Apr-16 21:41pm
v4

There are two problems with your code:

1) the main one: very likely the script loads and executes before finishing the DOM loading, thus, you may not have the "myCanvas" element when calling: document.getElementById('myCanvas');.
2) since you use local files, but with a full path (e.g., c:\...") you should specify the protocol, so use "file://C:/Users/User/Documents/folder1/Image Folder/Image1.jpg". While in some browsers may still work without specifying the protocol, it is recommended to use the protocol when using full URLs/URIs (including full paths from local drives!).

The complete code is:

window.addEventListener("load", function() {
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  var context1 = canvas.getContext('2d');
  var context2 = canvas.getContext('2d');
  var centerX = canvas.width / 2;
  var centerY = canvas.height / 2;
 
  var x = centerX;
  var y = centerY;
  var imageObj = new Image();
  imageObj.src = 'file://C:/Users/User/Documents/folder1/Image Folder/Image1.jpg';
  imageObj.onload = function () {
    context.drawImage(imageObj, x, y);
  };
});


In addition, formatting your code is a good idea and also don't use "var" for each variable in the same block or method, just coma separate the variables.
 
Share this answer
 
HTML5 Canvas Image Tutorial[^]

<canvas id="myCanvas" width="578" height="400"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();

imageObj.onload = function() {
context.drawImage(imageObj, 69, 50);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
</script>
 
Share this answer
 
v2
Comments
Mircea Diaconescu 21-Apr-16 3:44am    
As far as I know, CP Q&A answers must be self contained, and not external URLs, which may or may not exist sometime later.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900