drawImage() is not working

Question

When I open the html file in chrome, I only see the background, I open the consol and I see "hi" ever frame but I cant see the Image that I "drew" using the drawImage() `

var ctx = document.querySelector('Canvas').getContext('2d')

function draw() {
  ctx.drawImage(document.getElementById('Mario'), 50, 61, 0, 0)
  window.requestAnimationFrame(draw)
  console.log('hi')
}
draw()

#Canvas {
  width: 100%;
  height: 100%;
  background: url(Pictures/Background.jpg);
  margin: -8px;
}

<canvas id='Canvas'></canvas>
<div style='display:none;'>
  <img id='Mario' src='Pictures/Mario.png'>
</div>

Bad selector, for starters. – StackSlave May 07 '18 at 23:45 — StackSlave, May 07 '18 at 23:45

thingEvery · Accepted Answer · 2018-05-10T22:38:59.487

0

Here's your problem:

ctx.drawImage(document.getElementById('Mario'), 50, 61, 0, 0);

You've got your image width and height set to 0. Switch it to this instead:

ctx.drawImage(document.getElementById('Mario'), 0, 0, 50, 61);

edited May 10 '18 at 22:38

answered May 08 '18 at 02:13

thingEvery

3,368
1
19
25

Sorry, I had the mistake and correction switched. It should work. Check the fiddle: https://jsfiddle.net/tceqmprx/1/ – thingEvery May 10 '18 at 22:41
Okay, it worked but why does the picture quality look so poor? – Bahaaaldin Mohammad May 11 '18 at 20:37
If you mean in my example, it's because the pixel size doesn't match the dimensions passed into `drawImage()` – thingEvery May 12 '18 at 04:13
No I mean in my picture everything looks bad – Bahaaaldin Mohammad May 13 '18 at 20:09
Maybe it got somehing to do with the window.requestAnimationFrame because it starts out good and than it get worse – Bahaaaldin Mohammad May 13 '18 at 20:24
and every time I make the picture bigger it gets better – Bahaaaldin Mohammad May 13 '18 at 20:29
What are the actual pixel dimensions of your image? Ideally, you should display the image at it's actual pixel size. If that's not an option for whatever reason, and you have to downsize the image in the canvas, then see GameAlchemist's answer to this question: https://stackoverflow.com/questions/18922880/html5-canvas-resize-downscale-image-high-quality – thingEvery May 14 '18 at 21:04
No I have the exact same size, here is a zip file on google drive https://drive.google.com/file/d/1dvTJndbEf3Hfp-k8aeaWaiytxIJ3l45h/view?usp=sharing and why can I not use more than one key at once? – Bahaaaldin Mohammad May 23 '18 at 06:30

drawImage() is not working

1 Answers1