0

i try this for long time how can add the image to canvas in html or php only i got the image path i need to load the image to canvas in html or php,i don't need to add the image through jquery or javascript

in html i try this.

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;">
<img src="" alt="Resized Image" height="200px"     
width="200px"></canvas>
mohan
  • 453
  • 1
  • 5
  • 17

1 Answers1

1

There are a few ways to accomplish this.

First, there is a slightly hackish way to do it by setting the background image in css like this:

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;background-image:url('path/to/your/image.ext')">
</canvas>

This will work fine if you just want to display the image, however, I'm assuming that you want to actually manipulate it. In that case, check out this answer.

Community
  • 1
  • 1
OzBarry
  • 1,098
  • 1
  • 17
  • 44
  • thank you. but if i set like this i can't edit the image, i try to make a canvas image editor. any other way to load the image in canvas – mohan Feb 14 '13 at 14:07
  • Check out the link I gave at the end of my answer - the accepted answer on that question gives working javascript code to do what you want. In HTML5, to really use the canvas tag, you will need to use javascript. – OzBarry Feb 14 '13 at 14:09
  • that only way to add the image in canvas. – mohan Feb 14 '13 at 14:26
  • Yes, according to a few sources: [w3schools](http://www.w3schools.com/html/html5_canvas.asp) - "The HTML5 element is used to draw graphics, on the fly, via scripting (usually JavaScript).", [wikipedia](http://en.wikipedia.org/wiki/Canvas_element#Usage), and [html5canvastutorials](http://www.html5canvastutorials.com/tutorials/html5-canvas-tutorials-introduction/) – OzBarry Feb 14 '13 at 14:43