javascript - Why can't I draw a straight line?

Question

Why no straight line appears?

<canvas id="myCanvas" width="400" height="200">
canvas {
    border: 1px dashed black;
}

    window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.lineWidth = 10;
        context.moveTo(0, 50);
        context.lineTo(400, 150);
        context.stroke();
    }
    
    

Use chrome firefox to open jsfiddle respectively. No straight line appears?

Answer 1

Looking at the style of the screenshot, I think the questioner used jsfiddle. I ran it normally on runjs. I tried jsfiddle and found out why it didn’t work.

It seems that jsfiddle wraps user-defined js in window.onload. As shown in the screenshot, it is the outer onload that is called after the page is loaded, and reassigning onload in the inner layer does not help.

Remove window.onload and the jsfiddle preview will be normal...

Answer 2

I have tested it on chrome and ieedge, and both can produce straight lines.
There is nothing wrong with your code
You can look at other reasons