Convert jQuery to Javascript issue

Question

I have some issues to convert jQuery code to JavaScript code.

For example, I have this piece of code :

$(document).ready(function() {
    doing some stuff 
});

I tried to code like this :

document.getElementById("canvas").onload = function () {
    doing some stuff
};

but it's not working.

Here is bigger code I'm trying to convert :

$(document).ready(function() {
    var color = "#000000";
    var sign = false;
    var begin_sign = false;
    var width_line = 5;
    var canvas = $("#canvas");
    var cursorX, cursorY;
    var context = canvas[0].getContext('2d');

    context.lineJoin = 'round'; 
    context.lineCap = 'round'; 

    $(this).mousedown(function(e) {
        sign = true; 
        cursorX = (e.pageX - this.offsetLeft);
        cursorY = (e.pageY - this.offsetTop);
    });

    $(this).mouseup(function() {
        sign = false;
        begin_sign = false;
    });

For information, I want to get this result, in JavaScript: http://p4547.phpnet.org/bikes/canvas.html

Are you sure canvas have a load event? Why canvas and not `window`? — Taplar, Jun 21 '19 at 20:37
Why would you change a handler on the `document` element to a handler on a `canvas` element. That is not an equivalent transcription. — Randy Casburn, Jun 21 '19 at 20:39
You can use `window.onload = function() { //code it up! }`. see https://stackoverflow.com/questions/588040/window-onload-vs-document-onload . For the mousedown mouseup listeners see `document.addEventListener` https://www.w3schools.com/jsref/met_document_addeventlistener.asp — JSONaLeo, Jun 21 '19 at 20:41
window.onload is not an equivalent. Jquery does more than that with document ready. — shadow2020, Jun 21 '19 at 21:07

Avin Kavish · Accepted Answer · 2019-06-22T10:19:47.080

1

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);
    }
});

edited Jun 22 '19 at 10:19

answered Jun 22 '19 at 09:27

Avin Kavish

8,317
1
21
36

Thanks. However, if I do this, I have this error : Uncaught TypeError: canvas.mousemove is not a function at HTMLDocument. (canvas-2.js:29) – Sébastien Merour Jun 22 '19 at 09:32
yep, I missed that one, see my edit. It's similar to all other event listeners that you ported. – Avin Kavish Jun 22 '19 at 10:21

score 0 · Answer 2 · answered Jun 22 '19 at 01:45

Use addEventListener instead of onload as then you can have multiple 'listeners'. Also, I don't think that canvas elements have the 'load' event, so use the document instead. Same with document.offsetX and document.body.offsetX.

Your first example would be:

document.addEventListener('load', function() {
    // doing some stuff
});

And your second one:

document.addEventListener('load', function() {
    var color = "#000000";
    var sign = false;
    var begin_sign = false;
    var width_line = 5;
    var canvas = document.getElementById('canvas');
    var cursorX, cursorY;
    var context = canvas.getContext('2d');

    context.lineJoin = 'round'; 
    context.lineCap = 'round'; 

    document.addEventListener('mousedown', function(e) {
        sign = true; 
        cursorX = (e.pageX - document.body.offsetLeft);
        cursorY = (e.pageY - document.body.offsetTop);
    });

    document.addEventListener('mouseup', function(e) {
        sign = false;
        begin_sign = false;
    });
});

score 0 · Answer 3 · answered Jun 22 '19 at 01:49

This will work try

$(document).ready(function() {
var color = "#000000";
var sign = false;
var begin_sign = false;
var width_line = 5;
var canvas = $("#canvas");
var cursorX, cursorY;
var context = canvas[0].getContext('2d');

context.lineJoin = 'round'; 
context.lineCap = 'round'; 
 });

   $(document).mousedown(function(e) {
    sign = true; 
    cursorX = (e.pageX - this.offsetLeft);
    cursorY = (e.pageY - this.offsetTop);
    });

   $(document).mouseup(function() {
    sign = false;
    begin_sign = false;
    });

Convert jQuery to Javascript issue

3 Answers3