画布drawimage（）不显示图像

Question

I am trying to make a full screen, responsive image on Canvas. I believe I have the sizing figured out, but it isn't drawing the image and is instead leaving the canvas blank.

This is the HTML and JavaScript I am currently using:

<canvas id="MainCanvas"></canvas>
<script> 
    var canvas = document.getElementById("MainCanvas");
    var context = canvas.getContext("2d");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    var wRatio = canvas.width / imageObj.width;
    var hRatio = canvas.height / imageObj.height;
    var ratio = Math.min (wRatio, hRatio);
    var imageObj = new Image();  
    imageObj.onload= function() {
     context.drawImage(imageObj, 0, 0, canvas.width, canvas.height,imageObj.width*ratio, imageObj.height*ratio);
    };
    imageObj.src="Local File.jpg";
</script>

CSS:

canvas{
   border: 5pt solid black;
   position: relative;
   height: 100%;
   width: 100%;
}

Any help is greatly appreciated.

Answer 1

First off, good job on the minimal example. When I ran it in jsFiddle, here's what I got in my javascript console.

Uncaught TypeError: Cannot read property 'width' of undefined

Looking at your code, i noticed that it was trying to reference the width and height of the image before it had loaded. I put that code inside your onLoad function and that error was corrected. Next I got this error:

Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': Valid arities are: [3, 5, 9], but 7 arguments provided.

Seeing that, I looked up CanvasRenderingContext2D on MDN . That showed me what it required, and I added a 0,0 for the dx, dy values. This is completely wrong of course, but it at least gets the image to render ( jsfiddle link if the below example doesn't work correctly):

 var canvas = document.getElementById("MainCanvas"); console.log(canvas); var context = canvas.getContext("2d"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; var imageObj = new Image(); imageObj.onload= function() { var wRatio = canvas.width / imageObj.width; var hRatio = canvas.height / imageObj.height; var ratio = Math.min (wRatio, hRatio); context.drawImage(imageObj, 0, 0, canvas.width, canvas.height,0,0,imageObj.width*ratio, imageObj.height*ratio); }; imageObj.src="//placehold.it/500"; 

 html, body { height: 100%; } canvas{ border: 5pt solid black; position: relative; height: 100%; width: 100%; box-sizing: border-box; display:block; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css" rel="stylesheet"/> <canvas id="MainCanvas"></canvas>