Highlighted

canvas will not load in live demo or on the browsers

New Here ,
Dec 23, 2017

Copy link to clipboard

Copied

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

Adobe Community Professional
Correct answer by BenPleysier | Adobe Community Professional

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.

Views

146

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

canvas will not load in live demo or on the browsers

New Here ,
Dec 23, 2017

Copy link to clipboard

Copied

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

Adobe Community Professional
Correct answer by BenPleysier | Adobe Community Professional

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.

Views

147

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Dec 23, 2017 0
Adobe Community Professional ,
Dec 23, 2017

Copy link to clipboard

Copied

Is this an Animate CC question?

Create HTML5 Canvas documents in Animate CC

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 23, 2017 0
Adobe Community Professional ,
Dec 23, 2017

Copy link to clipboard

Copied

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.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 23, 2017 0