Question 176815 in Javascript Question posted in
A very good W3school tutorial can be found here.

Can JavaScript paste an image to a canvas at full size?

I have 640×692 jpg (Emperor_Penguin_Manchot_empereur.jpg). and I want to paste this in canvas.

So, I made the canvas

    const canvasRef = useRef();
    useEffect(() =>{
      var chara= new Image();
      chara.src = "http://localhost:8021/Emperor_Penguin_Manchot_empereur.jpg";

      chara.onload = () => {
        var ctx = canvasRef.current.getContext('2d');
        ctx.drawImage(chara,0,0,640,692,0,0,640,692);// paste the image as the same size.
    }

    return
    <canvas ref={canvasRef} style={{width:640,height:692}}></canvas>

this is the picture,

enter image description here

result

enter image description here

However with this script, it shows the only the part of this picture (left top).

I set the size of canvas and jpg as the same size.

Where am I wrong??

Tags:

2

Answers


  1. 0

    You need to explicitly define your canvas’s dimensions/resolution, e.g.:

    <canvas ref={canvasRef} width={640} height={692}></canvas>

    Without it, the browser uses some default like, 300px × 150px. All your CSS does is stretch the canvas to be 640px × 692px, it doesn’t actually make the canvas resolution larger.

    Login or Signup to reply.
  2. 0

    The code has a few errors. First, does not set the canvas’s width and height to the image’s width and height. This resulted in the image being scaled to fit the canvas. Second, it does not create a new 2D context for the canvas. This resulted in the image being drawn to the canvas using the default 2D context, which is not always what you want.

    const canvasRef = useRef();

useEffect(() => {
  const chara = new Image();
chara.src ="http://localhost:8021/Emperor_Penguin_Manchot_empereur.jpg";

chara.onload = () => {
  const ctx = canvasRef.current.getContext('2d');
  ctx.drawImage(chara, 0, 0);
};
}, []);

return (
  <canvas ref={canvasRef} style={{width: 640, height: 692}} />
);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search