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>

Ronnie · Accepted Answer · 2017-07-29 21:42:19Z

2

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>

answered Jul 29, 2017 at 21:42

Ronnie

5526 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gustavo Jantsch · Accepted Answer · 2017-07-29 21:51:44Z

2

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.

answered Jul 29, 2017 at 21:51

Gustavo Jantsch

3812 silver badges10 bronze badges

Comments

Black Mamba · Accepted Answer · 2017-07-29 21:40:33Z

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, 2017 at 21:40

Black Mamba

15.8k7 gold badges94 silver badges113 bronze badges

3 Comments

Black Mamba Over a year ago

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.

Ronnie Over a year ago

It should be img[0] because the JQuery doesn't select the DOM element, it returns an object which has the DOM Object

Black Mamba Over a year ago

This question will solve the issue stackoverflow.com/questions/43918791/…

Collectives™ on Stack Overflow

How to load image To HTML Canvas

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related