Draw image in canvas with JQuery

Question

$.fn.colorPicker = function () {
    const $div = this;
    const $colorPickerIcon = $("<img></img");
    const $canvas = $("<canvas></canvas>").addClass("canvas");
    const $context = $canvas.getContext("2d");
    const $closeButton = new Image();
    $closeButton.src = "./imgs/close.png";
    $($colorPickerIcon).attr("src", "./imgs/icon.jpg").attr("id", "icon").appendTo($div);
    $($colorPickerIcon).on("click", function () {
        $($colorPickerIcon).hide();
        $($closeButton).on("load", function () {
            $context.drawImage($closeButton, 0, 0);
        });
    });
}

I tried this code and after many changes I decide to question for solution here. I have a problem with getting context. I always recieve this mistake "TypeError: $canvas.getContext is not a function". I used this article to program this, but it's still not working.

Possible duplicate of [jQuery equivalent of getting the context of a Canvas](https://stackoverflow.com/questions/2925130/jquery-equivalent-of-getting-the-context-of-a-canvas) — Sebastian, Sep 01 '17 at 09:18
as far as I know `getContext("2d")` is not a `jQuery` function but a `JavaScript`. In order to get what you desired use `const $context = $canvas[0]` instead. — masterpreenz, Sep 01 '17 at 09:19

score 2 · Accepted Answer · answered Sep 01 '17 at 09:20

2

You are trying to access the getContext-Method of a jQuery Object. But getContext is a method of HTMLCanvasElement which is accessible under $('<canvas></canvas>')[0].getContext("2d")

answered Sep 01 '17 at 09:20

Tom M

2,815
2
20
47

1

you can find it inside the `__proto__`-method when you `console.log($('')[0])` – Tom M Sep 01 '17 at 09:24

Draw image in canvas with JQuery

1 Answers1