HTML5画布显示图像

Question

i would like to command my image.

Basically i have this code already; But how to i move my image to its desired location? Like a little bit on left, more to right, i mean the coordinates... where should i put it here?

  if(document.getElementById('fig1').checked){
        var canvas = document.getElementById('displaycake_sketch');
      var context = canvas.getContext('2d');
      var imageObj = new Image();

      imageObj.onload = function() {
        context.drawImage(imageObj, 10, 10);
      };
      imageObj.src = 'http://lh3.googleusercontent.com/-fsFMyfNLNG8/TuZs45U0dZI/AAAAAAAAg38/QIjqug0MnAo/Ic42/barbie6.png';

      }

Thank you in advance!

Answer 1

The drawImage() method of canvas has two coordinates ( x and y ). If you look at the documentation , you'll see, the second and third parameters of drawImage() method represents the x-coordinates and y-coordinates of the image respectively. So, you can move around the image to its desired location by changing those coordinates.

context.drawImage(imageObj, 10, 10)
                             ^   ^

DEMO

 var canvas = document.getElementById('displaycake_sketch'); var context = canvas.getContext('2d'); var context2 = document.getElementById('displaycake_sketch_2').getContext('2d'); var imageObj = new Image(); imageObj.src = 'http://lh3.googleusercontent.com/-fsFMyfNLNG8/TuZs45U0dZI/AAAAAAAAg38/QIjqug0MnAo/Ic42/barbie6.png'; imageObj.onload = function() { context.drawImage(imageObj, 10, 10); context2.drawImage(imageObj, 25, 85); }; 

 #displaycake_sketch, #displaycake_sketch_2 { background-color: pink; } 

 <canvas width="298" height="397" id="displaycake_sketch"></canvas> <canvas width="298" height="397" id="displaycake_sketch_2"></canvas> 

Answer 2

context.drawImage(imageObj, 10, 10);

This is the line that controls the coordinates; the first 10 is the x value and the second 10 is the y value.

Answer 3

you can move the image using x,y coordinate with .drawImage(image,x,y) function

if(document.getElementById('fig1').checked){
      var canvas = document.getElementById('displaycake_sketch');
      var context = canvas.getContext('2d');
      var imageObj = new Image();

      imageObj.onload = function() {
        context.drawImage(imageObj, 20, 20);
      };
      imageObj.src = 'http://lh3.googleusercontent.com/-fsFMyfNLNG8/TuZs45U0dZI/AAAAAAAAg38/QIjqug0MnAo/Ic42/barbie6.png';    
 }

Reference : https://www.w3schools.com/graphics/canvas_images.asp