I want that the image inserted in the canvas does not cross the edges but that these are its limits

Question

I want that the image inserted in the canvas does not cross the edges but that these are its limits

Navigation

#1 by (1 votes)

0

var x= 220, y= 730;

        function lienzo(){

            var c = document.getElementById("myCanvas");
            var ctx = c.getContext("2d");
            var img = document.getElementById("ima");
            ctx.clearRect(0,0,c.width,c.height);
            ctx.drawImage(ima,x,y);
        }

           

        function whichButton(event){
            if(event.keyCode=='39'){
                x = x + 5;
                lienzo();
            }

            if(event.keyCode=='37'){
                x = x - 5;
                lienzo();
            }

            if(event.keyCode=='38'){
                y = y - 5;
                lienzo();
            }

            if(event.keyCode=='40'){
                y = y + 5;
                lienzo();
            }


        }

        function limitesPared(){
          
        }

<!DOCTYPE html>
<html>
	<head>
		<title>Game</title>
		<script type="text/javascript" src="script.js"></script>
		<meta charset="utf-8">
		<marquee scrollamonunt="900" direction="left">Juego producido por Figueroa Company</marquee> 

	</head>

		
	
	<body onkeydown="whichButton(event)" onload="lienzo()"onload="game.init()">

		<div align="center">
			<canvas id="myCanvas" width="500%" height="800%" style="border:3px solid green;background-color:#000000;">
			<img id="ima" src="bueno.png">
		</div>


	</body>
</html>

javascript html canvas function

asked by Estudiante 27.12.2018 в 21:32

source

1 answer

RStudio I do not show import dataset by URL Show laps of a for in time intervals

score 1 · Answer 1

The image comes out of the canvas because you paint it from x = 220, y = 730. So this does not happen, paint it from x = 0, y = 0: ctx.drawImage(ima, 0, 0) ;

If you want the edges of canvas to be the limits of the image you have to make the canvas as big as the image. So instead of giving the canvas a width and a height in the HTML, do it in javascript.

I would like to know what the variables var x = 220,y = 730; mean. Do they represent the size of your image?

  c.width = img.width;
  c.height = img.height;

var img = document.getElementById("ima");
//var x = 220,
//y = 730;

function lienzo() {
  var c = document.getElementById("myCanvas");
  c.width = img.width;
  c.height = img.height;
  var ctx = c.getContext("2d");
  
  ctx.clearRect(0, 0, c.width, c.height);
  ctx.drawImage(ima, 0, 0);
}

lienzo();

<body onkeydown="whichButton(event)" onload="lienzo()"onload="game.init()">

    <div align="center">
        <canvas id="myCanvas" style="border:3px solid green;background-color:#000000;">
        <img id="ima" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/beagle400.jpg" >
          </canvas>
    </div>


</body>

update

The OP comments:

The variables X = 220, Y = 730; they are so that when you update the page the image appears in those positions (center of the bottom canvas)

What I understand is that the canvas has a width of 220 * 2 and a height of 730, and that the image has to appear in the center of the canvas at the bottom. In this case the code would be this:

var img = document.getElementById("ima");

function lienzo() {
  var c = document.getElementById("myCanvas");
  c.width = 440;
  c.height = 730;
  var ctx = c.getContext("2d");
  
  ctx.clearRect(0, 0, c.width, c.height);
  ctx.drawImage(ima, (c.width-img.width)/2, c.height-img.height);
}

lienzo();

canvas{background:black;}

<div align="center">
  <canvas id="myCanvas">
  <img id="ima" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/pin.png">
</canvas>
</div>

To draw an image we can use contexto.drawImage(img,x,y); where x and y represent the coordinates of the upper corner of the image. In this case the width and height of the image painted on the canvas are equal to the height and width of the image used. So to paint the image in the center of the bottom canvas you have to write ctx.drawImage(ima, (c.width-img.width)/2, c.height-img.height);