Skip to main content
B
bumples5
Known Participant
December 23, 2017
Answered

canvas will not load in live demo or on the browsers

  • December 23, 2017
  • 2 replies
  • 326 views

I am trying out canvas and can not see it in the live load or any browsers. here is the code.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>


<script>

window onload = function(){
  var myCanvas = document.getElementById('myCanvas')
  var ctx = myCanvas.getContext("2d");
 
  ctx.beginPath();
  ctx.arc(260,150,100,0, math PI*2, true);
  ctx.closePath();
  ctx.fill()l
 
}

</script>

</head>

<body>
<canvas id ="myCanvas" width="400" height="300" style="border:10px solid #000000;"></canvas>

</body>
</html>

I tried several different types in canvas.  what is the problem?

thanks

jen

    This topic has been closed for replies.
    Correct answer BenPleysier

    Have a look at

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    </head>
    <body>
    <canvas id ="myCanvas" width="400" height="300" style="border:10px solid #000000;"></canvas>
    <script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.arc(260,150,100,0, Math.PI*2);
    ctx.fill();
    </script>
    </body>
    </html>

    Where I have used the correct syntax as in "Math.PI" and not made a typo by typing "l" instead of ";".

    The main part of the solution is having the canvas drawn before the object that occupies it.

    2 replies

    BenPleysier
    Community Expert
    BenPleysierCommunity ExpertCorrect answer
    Community Expert
    December 24, 2017

    Have a look at

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    </head>
    <body>
    <canvas id ="myCanvas" width="400" height="300" style="border:10px solid #000000;"></canvas>
    <script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.arc(260,150,100,0, Math.PI*2);
    ctx.fill();
    </script>
    </body>
    </html>

    Where I have used the correct syntax as in "Math.PI" and not made a typo by typing "l" instead of ";".

    The main part of the solution is having the canvas drawn before the object that occupies it.

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    December 23, 2017

    Is this an Animate CC question?

    Create HTML5 Canvas documents in Animate CC

    Nancy O'Shea— Product User & Community Expert
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices