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>

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

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

```