How to load image To HTML Canvas

Question

I am working on the below demo. Why am I not able to load the image into HTML canvas?

I am getting this error:

{
  "message": "Uncaught TypeError: c.getContext is not a function",
  "filename": "https://stacksnippets.net/js",
  "lineno": 24,
  "colno": 17
}

$(document).ready(function() {
  var expose = function() {
    var c = $("#myCanvas");
    var ctx = c.getContext("2d");
    var img = $("#scream");
    ctx.drawImage(img, 10, 10);
  };
  setTimeout(expose, 2000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Image to use:</p>
<img id="scream" width="220" height="277" src="https://www.w3schools.com/tags/img_the_scream.jpg" alt="The Scream">

<p>Canvas:</p>
<canvas id="myCanvas" width="240" height="297" style="border:1px solid #d3d3d3;">
  Your browser does not support the HTML5 canvas tag.
</canvas>

score 2 · Accepted Answer · answered Jul 29 '17 at 21:42

Well because JQuery returns an object that contains the DOM elements, and using #myCanvas doesn't actually select the DOM element

$(document).ready(function() {
  var expose = function() {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var img = document.getElementById("scream");
    ctx.drawImage(img, 10, 10);
  };
  setTimeout(expose, 2000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Image to use:</p>
<img id="scream" width="220" height="277" src="https://www.w3schools.com/tags/img_the_scream.jpg" alt="The Scream">

<p>Canvas:</p>
<canvas id="myCanvas" width="240" height="297" style="border:1px solid #d3d3d3;">
  Your browser does not support the HTML5 canvas tag.
</canvas>

score 2 · Answer 2 · answered Jul 29 '17 at 21:51

You need to make two changes:

var ctx = c[0].getContext("2d");
var img = document.getElementById('scream');

For the first: jQuery equivalent of getting the context of a Canvas

And for the second, is expected you to pass an CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas, jQuery returns a jQuery object not a DOM element.

score 0 · Answer 3 · answered Jul 29 '17 at 21:40

0

It should be like this

$(document).ready(function() {
  var expose = function() {
    var c = $("#myCanvas");
    var ctx = c[0].getContext("2d");
    var img = $("#scream");
    ctx.drawImage(img, 10, 10);
  };
  setTimeout(expose, 2000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Image to use:</p>
<img id="scream" width="220" height="277" src="https://www.w3schools.com/tags/img_the_scream.jpg" alt="The Scream">

<p>Canvas:</p>
<canvas id="myCanvas" width="240" height="297" style="border:1px solid #d3d3d3;">
  Your browser does not support the HTML5 canvas tag.
</canvas>

answered Jul 29 '17 at 21:40

Black Mamba

13,632
6
82
105

It's an issue with your image.Lemme check but I'm queit sure it's all about the image.Change the image and it should work and moreover the error will be there in the log only and not displayed to the user. – Black Mamba Jul 29 '17 at 21:43
1

It should be img[0] because the JQuery doesn't select the DOM element, it returns an object which has the DOM Object – Ronnie Jul 29 '17 at 21:43
This question will solve the issue https://stackoverflow.com/questions/43918791/quaggajs-failed-to-execute-drawimage – Black Mamba Jul 29 '17 at 21:47

How to load image To HTML Canvas

3 Answers3