Draw Image in Canvas using HTML

#	Content	Views
1.	Tutorial Tags	37,059
2.	Tutorial + Programming	1,061,851
3.	Videos	353,229
4.	Results (`Annual + Re-appear`)	44,846
5.	Quiz Chapters	37,081
6.	Quiz Questions	540,074
7.	Quiz Results	29,742
8.	Testimonials	7,594
9.	Projects	33,794
10.	e-Words	22,245
11.	e-Certificates	4,968
12.	Downloads (Softwares)	121,476
13.	Downloads (Syllabus)	2,638

Home
HTML
Graphics
Draw Image In Canvas Using Html

Draw Image in Canvas using HTML

<!DOCTYPE html>
<html>
<body>

<table width="100%" border="0">
<tr>
<td valign="top">
<p>Image to use:</p>
<img id="scream" src="/media/StaffImages/579095286.jpg" alt="The Scream" width="220" height="277">
</td>
<td valign="top">
<p>Canvas to fill:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>
<p><button onclick="myCanvas()">Try it</button></p>
</td>
</tr>
</table>

<script>
function myCanvas() {
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  var img = document.getElementById("scream");
  ctx.drawImage(img,10,10);
}
</script>

</body>
</html>

Live Demo & Try it yourself!

#HTML #image #canvas #draw

CSPunjab.Com

Draw Image in Canvas using HTML

« Previous

<!DOCTYPE html>
<html>
<body>

<table width="100%" border="0">
<tr>
<td valign="top">
<p>Image to use:</p>
<img id="scream" src="/media/StaffImages/579095286.jpg" alt="The Scream" width="220" height="277">
</td>
<td valign="top">
<p>Canvas to fill:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>
<p><button onclick="myCanvas()">Try it</button></p>
</td>
</tr>
</table>

<script>
function myCanvas() {
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  var img = document.getElementById("scream");
  ctx.drawImage(img,10,10);
}
</script>

</body>
</html>

Live Demo & Try it yourself!