CODEWITHSUNDEEP
javascripthtmlcanvas
Vaibhav Dass
Vaibhav Dass

Reputation: 324

HTML5 How to call image in Canvas

I have design a canvas now I want to call a image in that canvas. I have gone through the tutorials but I don't know how to implement that. My image is high resolution but I want to reduce that image size and resolution with javascript. Anybody will help me.

<canvas id="myCanvas" width="600" height="400" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();

ctx.moveTo(8,200);
ctx.lineTo(8,308);
ctx.moveTo(259,76);
ctx.lineTo(259,308);
ctx.moveTo(259,308);
ctx.lineTo(8,308);
ctx.moveTo(8,200);
ctx.lineTo(259,76);
ctx.stroke();
var imageObj = new Image();

  imageObj.onload = function() {
    ctx.drawImage(imageObj, 69, 50);
  };
  imageObj.src = 'img/logo.jpg', height='42', width='42';
</script>

I am not able to call image. Anybody will help me how to convert this javascript in jquery?

Thanks

Upvotes: 1

Views: 908

Answers (1)

Shiva
Shiva

Reputation: 6887

You need to use the following syntax if you want to resize the image too.

context.drawImage(img,x-Position,y-Position,width,height);

Here is an Updated JSFiddle as an example.

You can read more about drawImage function in this W3CSchool's article.

Upvotes: 1

Related Questions