Jquery Equivalent of Getting the Context of a Canvas

jQuery equivalent of getting the context of a Canvas

Try:

$("#canvas")[0].getContext('2d');

jQuery exposes the actual DOM element in numeric indexes, where you can perform normal JavaScript/DOM functions.

How do I run Canvas getContext() using jQuery

$(".canvas") selects all elements with a class of "canvas". You do not have any elements that satisfy this selector, as your <canvas> doesn't have any class on it at all.
You could either use $("#canvas") to select by id, or $("canvas") to select by node type (<canvas>).
var c is already a jQuery object - no need to re-wrap it in $(...)
This is only a hunch based on your window.onload, but if your script is not at the end of the <body> or it's in the <head> but not wrapped in a $(document).ready( ... ), the code will look for the <canvas> element before it exists.

$(document).ready(function() {              // Remove this line if your code is at the end of <body>
    var $c = $('#canvas');
    var ctx = $c.get(0).getContext('2d');
});                                         // Remove this line if your code is at the end of <body>

I've changed var c to var $c and [0] to .get(0) strictly on the basis of personal preference.

get the context of a created canvas with JQuery

change "map" to "canvas", and error will gone

  var map_rendered = document.createElement("canvas");  map_rendered.heigt = 100 ;  map_rendered.width = 100 ;  var map_rendered_ctx = map_rendered.getContext("2d");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

Draw image in canvas with JQuery

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")

Does canvas.getContext(2d) return the same instance every time?

For any one canvas element, canvas.getContext("2d") always returns the one-and-only context for that one canvas element.

Source: HTML 5.2 §4.2 Scripting

Return the same object as was return the last time the method was invoked with this same first argument.

If you create a new canvas element with document.createElement("canvas") (or jquery equivalent) then getContext on that new canvas will return a unique context for that new canvas.

Convert jQuery to Javascript issue

Continuing on from the partial solution you provided, since you changing from jQuery element to a DOM node, you have to access a few properties differently as outlined below.

document.addEventListener("DOMContentLoaded", function(event) {
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d'); // <--- remove [0] index

    canvas.addEventListener('mousemove', function(e) { ... ))

    function clear_canvas() {
        // offsetWidth and offsetHeight instead of Height() and Width()
        context.clearRect(0, 0, canvas.offsetWidth, canvas.offsetHeight);
    }
});

jquery getcontext on dynamic id canvas

The problem is that you have created the canvas element but in memory not the part of html yet. To do that you need to append the canvas to your body.
Just add the below code after you have created the canvas element and it will work fine.

$("body").append(gcanvas);

$(this) differs from 'element' parameter in the context of the $.each loop

getContext is a method of the canvas element, not a jQuery method.

Any object you see looking like $(...) is a jQuery object, and you can only access jQuery methods and properties from that object. To access the underlying element of a jQuery object, you can dereference it like an array. e.g. The first element in a jQuery object would be $(...)[0], and so on.

Within the context of the each loop, the object you labeled as element is in fact the HTML element (in this case the canvas element), which is why that line works. this and element are synonymous there, so you can use either one. $(this) and $(element) are both jQuery objects however.

Likewise, in your second example, $('#content #'+i) references a jQuery object, and $('#content #'+i)[0] gives you the underlying DOM element.

$('#content #'+i)[0].getContext("2d"); //yields appropriate result

As a general note

The error message Object xyz has no method 'abc', or something similar, which you no doubt received when you attempted to invoke getMethod on the jq object, generally suggests you're chaining a method on to something whose structure you're misunderstanding—and is generally a good sign you should go and consult the API for the object you're working with. Logging the object to the console usually also gives good insight into it's structure, and in this case doing so would've told you that you weren't actually operating on the canvas.

Jquery Equivalent of Getting the Context of a Canvas