Hi all again i have problem in my chart construction in html 5. This time did everything well except one part or module. I tried some code which i got through internet for displaying some alert when a rectangle in canvas in clicked. When i comment the module it works fine but not the mouse click. Can anyone help me out. Thanks in advance. Here is my fiddle and code [fiddle]: http://jsfiddle.net/s8kZs/
<!doctype html>
<html>
<head>
<script type="text/javascript">
window.onload=function() {
var canvas=document.getElementById('mycanvas');
var ctx=canvas.getContext('2d');
var graphInfo=[{data:[120,130,140,160,180,100],color:'purple',label:["a","b","c","d","e","f"]},{data:[100,120,130,140,150,190],color:'green',label:["g","h","i","j","k","l"]}];
var width=45;
function renderGrid(gridPixelSize, color)
{
ctx.save();
ctx.lineWidth = 0.5;
ctx.strokeStyle = color;
for(var i = 20; i <= canvas.height-20; i = i + gridPixelSize)
{
ctx.beginPath();
ctx.moveTo(20, i);
ctx.lineTo(canvas.width-20, i);
ctx.closePath();
ctx.stroke();
}
for(var j = 20; j <= canvas.width-20; j = j + gridPixelSize)
{
ctx.beginPath();
ctx.moveTo(j, 20);
ctx.lineTo(j, canvas.height-20);
ctx.closePath();
ctx.stroke();
}
ctx.restore();
}
renderGrid(10, "grey");
ctx.beginPath();
ctx.strokeStyle = 'black';
ctx.moveTo(20, canvas.height-20);
ctx.lineTo(canvas.width-20, canvas.height-20);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = 'black';
ctx.moveTo(20, 20);
ctx.lineTo(20, canvas.height-20);
ctx.closePath();
ctx.stroke();
ctx.font = "bold 16px Arial";
function getFunctionForTimeout(j){
var i=0,currx=30,info=graphInfo[j],x5=j*5;
var fTimeout=function(){
var h=Math.max(info.data[i]-x5,0);
var m=info.label[i];
ctx.fillStyle='black'
ctx.fillRect(currx+(10*x5)+2,canvas.height-h-20,width+2,h-1);
ctx.fillStyle=info.color;
ctx.fillRect(currx+(10*x5),canvas.height-h-21,width,h);
ctx.fillText(m, currx+(10*x5)+20, canvas.height-5);
currx+=120;
i++;
/*var ctx = $('#mycanvas').get(0).getContext('2d');
$('#mycanvas').click(function(e) {
var x = e.offsetX,
y = e.offsetY;
for(var k=0;k<j;k++) {
if(x > currx+(10*x5)
&& x < canvas.height-h-21
&& y > width
&& y < h) {
alert('Rectangle ' + j + ' clicked');
}
}
});*/
if(i<info.data.length)setTimeout(fTimeout,2000);
};
return fTimeout;
}
for(var j=graphInfo.length-1;j>=0;j--) {
setTimeout(getFunctionForTimeout(j),2000);
}
};
</script>
</head>
<body>
<canvas id="mycanvas" height="400" width="800" style="border:1px solid #000000;">
</body>
</html>
Here is the code for giving you mouse position where you are clicking on the canvas, i just altered your code for correcting it for the alert you are expecting but there is some issue in your condition which you generate as an alert.
Njoy clicking and alerting the mouse position; if you want the same alert you expect, alter your if condition you will get it by my position alert...
<!doctype html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript">
window.onload=function() {
var canvas=document.getElementById('mycanvas');
var ctx=canvas.getContext('2d');
var graphInfo=[{data:[120,130,140,160,180,100],color:'purple',label:["a","b","c","d","e","f"]},{data:[100,120,130,140,150,190],color:'green',label:["g","h","i","j","k","l"]}];
var width=45;
function renderGrid(gridPixelSize, color)
{
ctx.save();
ctx.lineWidth = 0.5;
ctx.strokeStyle = color;
for(var i = 20; i <= canvas.height-20; i = i + gridPixelSize)
{
ctx.beginPath();
ctx.moveTo(20, i);
ctx.lineTo(canvas.width-20, i);
ctx.closePath();
ctx.stroke();
}
for(var j = 20; j <= canvas.width-20; j = j + gridPixelSize)
{
ctx.beginPath();
ctx.moveTo(j, 20);
ctx.lineTo(j, canvas.height-20);
ctx.closePath();
ctx.stroke();
}
ctx.restore();
}
renderGrid(10, "grey");
ctx.beginPath();
ctx.strokeStyle = 'black';
ctx.moveTo(20, canvas.height-20);
ctx.lineTo(canvas.width-20, canvas.height-20);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = 'black';
ctx.moveTo(20, 20);
ctx.lineTo(20, canvas.height-20);
ctx.closePath();
ctx.stroke();
ctx.font = "bold 16px Arial";
function getFunctionForTimeout(j){
var i=0,currx=30,info=graphInfo[j],x5=j*5;
var fTimeout=function(){
var h=Math.max(info.data[i]-x5,0);
var m=info.label[i];
var ctx = $('#mycanvas').get(0).getContext('2d');
ctx.fillStyle='black'
ctx.fillRect(currx+(10*x5)+2,canvas.height-h-20,width+2,h-1);
ctx.fillStyle=info.color;
ctx.fillRect(currx+(10*x5),canvas.height-h-21,width,h);
ctx.fillText(m, currx+(10*x5)+20, canvas.height-5);
currx+=120;
i++;
$('#mycanvas').click(function(e) {
var canvas = document.getElementById("myCanvas");
var mousePos = getMousePos(canvas, e);
var message = "Mouse position: " + mousePos.x + "," + mousePos.y;
var x = mousePos.x;
var y = mousePos.y;
alert(message);
for(var k=0;k<j;k++) {
if(x > currx+(10*x5)
&& x < canvas.height-h-21
&& y > width
&& y < h) {
alert('Rectangle ' + j + ' clicked');
}
}
});
if(i<info.data.length)setTimeout(fTimeout,2000);
};
return fTimeout;
}
for(var j=graphInfo.length-1;j>=0;j--) {
setTimeout(getFunctionForTimeout(j),2000);
}
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect(), root = document.documentElement;
// return relative mouse position
var mouseX = evt.clientX - rect.top - root.scrollTop;
var mouseY = evt.clientY - rect.left - root.scrollLeft;
return {
x: mouseX,
y: mouseY
};
}
};
</script>
</head>
<body>
<canvas id="mycanvas" height="400" width="800" style="border:1px solid #000000;">
</body>
</html>
Just check the change in getMousePos() for the same u needed
Cheers!!! Njoy!!!
Related
function showCoords(event) {
i++;
var x = event.clientX;
var y = event.clientY; var coords = "X coords: " + x + ", Y coords: " + y;
document.getElementById("demo").innerHTML = coords;
if(i%2==0) {
ctx.beginPath();
ctx.arc(x-10,y-10,5,0,2*Math.PI);
ctx.stroke();
} else {
ctx.beginPath();
ctx.arc(x-10,y-10,5,0,2*Math.PI);
ctx.fill();
ctx.stroke();
}
}
You can use ctx.clearRect(0, 0, c.width, c.height); to clear the content.
function showCoords(event) {
i++;
var x = event.clientX;
var y = event.clientY;
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.clearRect(0, 0, c.width, c.height);
console.log(x,y);
var coords = "X coords: " + x + ", Y coords: " + y;
document.getElementById("demo").innerHTML = coords;
if(i%2==0) {
ctx.beginPath();
ctx.arc(x-10,y-10,5,0,2*Math.PI);
ctx.stroke();
} else {
ctx.beginPath();
ctx.arc(x-10,y-10,5,0,2*Math.PI);
ctx.fill();
ctx.stroke();
}
}
var i=0;
$(document).click(showCoords)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="demo"></div>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Working demo
I'm drawing canvas and have put in some shapes and text and I want to move the text inside the canvas like the text bar animated from left to right
As you can see, when I'm moving the text is moving not like it supposed to be.
How can I fix it?
<script>
var pointX, pointY , w , h ;
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
c.width = window.innerWidth;
c.height = window.innerHeight;
ctx.clearRect(0, 0, ctx.canvas.width,ctx.canvas.height);
ctx.beginPath();
ctx.strokeStyle='red';
ctx.strokeRect(10,0,720,576);
ctx.closePath();
ctx.beginPath();
ctx.fillStyle='grey';
ctx.fillRect(10,525,720,50);
ctx.closePath();
ctx.beginPath();
var start = 10;
setInterval(function(){
start += 4;
ctx.font = "30px Arial";
ctx.fillStyle = "red";
ctx.textAlign = "left";
ctx.fillText("Hello World",start, 560);
}, 40);
ctx.closePath();
pointX = 690;
pointY = 550;
w = 30;
h = 20;
ctx.beginPath();
ctx.strokeStyle='red';
ctx.strokeRect(pointX,pointY,w,h);
ctx.closePath();
</script>
<!DOCTYPE html>
<html>
<head>
<script src ="js/jquery-3.3.1.min.js" ></script>
<link href ="css/bootstrap.min.css" rel="stylesheet">
<script src ="js/bootstrap.min.js" ></script>
<meta charset="utf-8">
<meta name = "viewport" content = "width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0"/>
</head>
<body dir="rtl" id="tbodyid">
<canvas id="myCanvas" width="1050" height="1050" class="col-12 col-s-12" >
</canvas>
</body>
</html>
As I've commented, inside your setInterval function you should add ctx.clearRect(0,0,c.width,c.height). Also you have to redraw everything else. So I've putted your shapes inside functions, and I'm calling those functions inside setInterval too.
var pointX, pointY , w , h ;
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
c.width = 1000;
c.height = 650;
ctx.clearRect(0, 0, ctx.canvas.width,ctx.canvas.height);
function drawShape1(){
ctx.beginPath();
ctx.strokeStyle='red';
ctx.strokeRect(10,0,720,576);
ctx.closePath();
ctx.beginPath();
ctx.fillStyle='grey';
ctx.fillRect(10,525,720,50);
ctx.closePath();
}
function drawShape2(){
pointX = 690;
pointY = 550;
w = 30;
h = 20;
ctx.beginPath();
ctx.strokeStyle='red';
ctx.strokeRect(pointX,pointY,w,h);
ctx.closePath();
}
var start = 10;
setInterval(function(){
ctx.clearRect(0,0,c.width,c.height)
drawShape1()
start += 4;
ctx.font = "30px Arial";
ctx.fillStyle = "red";
ctx.textAlign = "left";
ctx.fillText("Hello World",start, 560);
drawShape2()
}, 40);
<canvas id="myCanvas" width="1000" height="650" class="col-12 col-s-12" ></canvas>
However if you want to try using requestAnimationFrame instead of setInterval this is how to do it:
Since requestAnimationFrame runs at 60 frames per sec I've changed start += 4; to start += 2;
var pointX, pointY , w , h ;
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
c.width = 1000;
c.height = 650;
ctx.clearRect(0, 0, ctx.canvas.width,ctx.canvas.height);
function drawShape1(){
ctx.beginPath();
ctx.strokeStyle='red';
ctx.strokeRect(10,0,720,576);
ctx.closePath();
ctx.beginPath();
ctx.fillStyle='grey';
ctx.fillRect(10,525,720,50);
ctx.closePath();
}
function drawShape2(){
pointX = 690;
pointY = 550;
w = 30;
h = 20;
ctx.beginPath();
ctx.strokeStyle='red';
ctx.strokeRect(pointX,pointY,w,h);
ctx.closePath();
}
var start = 10;
function frame(){
requestAnimationFrame(frame)
ctx.clearRect(0,0,c.width,c.height)
drawShape1()
start += 2;
ctx.font = "30px Arial";
ctx.fillStyle = "red";
ctx.textAlign = "left";
ctx.fillText("Hello World",start, 560);
drawShape2()
}
frame()
<canvas id="myCanvas" width="1050" height="1050" class="col-12 col-s-12" >
</canvas>
<canvas id="myCanvas" width="1050" height="1050" class="col-12 col-s-12" >
</canvas>
<script>
var pointX, pointY , w , h ;
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
c.width = 1000;
c.height = 650;
ctx.clearRect(0, 0, ctx.canvas.width,ctx.canvas.height);
function drawShape1(){
ctx.beginPath();
ctx.strokeStyle='red';
ctx.strokeRect(10,0,720,70);
ctx.closePath();
ctx.beginPath();
ctx.fillStyle='gold';
ctx.fillRect(10,10,720,50);
ctx.closePath();
}
function drawShape2(){
pointX = 690;
pointY = 30;
w = 30;
h = 20;
ctx.beginPath();
ctx.strokeStyle='red';
ctx.strokeRect(pointX,pointY,w,h);
ctx.closePath();
}
var start = 10;
function frame(){
requestAnimationFrame(frame)
ctx.clearRect(0,0,c.width,c.height)
drawShape1()
start += 2;
ctx.font = "30px Arial";
ctx.fillStyle = "red";
ctx.textAlign = "left";
ctx.fillText("Hello World",start, 50);
if (start > 576) start = 0;
drawShape2()
}
frame()
</script>
So I'm trying to implement platforms for the game I'm making for a project (similar to falldown) and have created multiple arrays that have contain all the possible platforms (canvas is 360 so there is if platform[i] == 1 it draws a rect)
var canvas;
var ctx;
var isPlaying = false;
window.onload = function(){
canvas= document.getElementById("gamesCanvas");
ctx = canvas.getContext("2d");
var fps = 60;
setInterval(function(){
}, 1000/fps);
createMenu();
canvas.addEventListener('click', getClicks.bind(this), false)
//canvas.addEventListener("mousemove", getPos)
}
function initialise(){
isPlaying = true;
ctx.clearRect(0, 0, canvas.width, canvas.height);
createRect(0,0, canvas.width, canvas.height, 'black');
createPlatforms();
}
function createPlatforms(){
x = randint(1,2);
console.log(x)
var i;
var pos = -60;
var platform1 = [0,1,1,1,1,1];
var platform2 = [1,0,1,1,1,1];
var platform3 = [1,1,0,1,1,1];
var platform4 = [1,1,1,0,1,1];
var platform5 = [1,1,1,1,0,1];
var platform6 = [1,1,1,1,1,0];
if(x==1){
for (i=0; i<platform1.length; ++i) {
var pos = (pos+60);
if(platform1[i] == 1){
createRect(pos, 60, 60,5, 'white');
}
}
}
else if(x==2){
for (i=0; i<platform2.length; ++i){
var pos = (pos+60);
if (platform2[i] ==2){
createRect(pos,60,75,5,'white');
}
}
}
}
function randint(min, max) {
return ~~(Math.random() * (max - min + 1) + min);
}
function background(color) {
ctx.fillStyle = color;
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
function createMenu(){
background("black");
if (!isPlaying) {
ctx.font = "60px monospace";
ctx.fillStyle = "white";
ctx.fillText("FallDown", 40, 130);
ctx.font = "34px Arial";
ctx.fillStyle = "white";
ctx.fillText("PLAY", 130, 260);
ctx.font = "34px Arial";
ctx.fillStyle = "white";
ctx.fillText("LEADERBOARD", 50, 340);
ctx.font = "34px Arial";
ctx.fillStyle = "white";
ctx.fillText("SETTINGS", 90, 420);
}
}
function createRect(leftX, topY, width, height, color){
ctx.fillStyle = color;
ctx.fillRect(leftX, topY, width, height);
}
function getClicks(evt) {
var x = evt.offsetX;
var y = evt.offsetY;
if ((x > 110 && x < 240) && (y > 220 && y < 275) && !isPlaying) {
initialise()
}
}
<html>
<head>
<title>Falldown</title>
</head>
<body>
<canvas id="gamesCanvas" width="360" height="640"></canvas>
<!--script src="test.js"></script-->
</body>
</html>
However, if x>1 (so basically an else if statement is required to run) it doesn't draw anything.
I was testing to see whether it is something that I could fix, however, all I managed to realise that if the if statement has got the contents of the else if statement than it will draw the rects in the right position so in this case (platform2) would be drawn.
I've managed to narrow down the problem but I'm not sure how to fix it. I have experience with python but have never experienced anything like this
Just letting you know that I can't just use the else statement as I have to implement 6 platforms and if I were to use just if and else than that would mean I could only draw 2 of the 6 platforms
Your initial problem wasn't with the if / else.. but the if inside..
But with -> if (platform2[i] ==2){ this wanted to be if (platform2[i] == 1){
But saying all this, your createPlatforms was only creating a single platform. It didn't really need any If/else or arrays.
Below I've modified createPlatforms, using just two for loops.
var canvas;
var ctx;
var isPlaying = false;
window.onload = function(){
canvas= document.getElementById("gamesCanvas");
ctx = canvas.getContext("2d");
var fps = 60;
setInterval(function(){
}, 1000/fps);
createMenu();
canvas.addEventListener('click', getClicks.bind(this), false)
//canvas.addEventListener("mousemove", getPos)
}
function initialise(){
isPlaying = true;
ctx.clearRect(0, 0, canvas.width, canvas.height);
createRect(0,0, canvas.width, canvas.height, 'black');
createPlatforms();
}
function createPlatforms(){
for (var y = 0; y < 8; y ++) {
var x = randint(0, 5), pos = 0;
for (var i = 0; i < 6; i ++) {
if (i !== x) {
createRect(pos, 60 + y*60 ,75,5,'white');
}
pos += 60;
}
}
}
function randint(min, max) {
return ~~(Math.random() * (max - min + 1) + min);
}
function background(color) {
ctx.fillStyle = color;
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
function createMenu(){
background("black");
if (!isPlaying) {
ctx.font = "60px monospace";
ctx.fillStyle = "white";
ctx.fillText("FallDown", 40, 130);
ctx.font = "34px Arial";
ctx.fillStyle = "white";
ctx.fillText("PLAY", 130, 260);
ctx.font = "34px Arial";
ctx.fillStyle = "white";
ctx.fillText("LEADERBOARD", 50, 340);
ctx.font = "34px Arial";
ctx.fillStyle = "white";
ctx.fillText("SETTINGS", 90, 420);
}
}
function createRect(leftX, topY, width, height, color){
ctx.fillStyle = color;
ctx.fillRect(leftX, topY, width, height);
}
function getClicks(evt) {
var x = evt.offsetX;
var y = evt.offsetY;
if ((x > 110 && x < 240) && (y > 220 && y < 275) && !isPlaying) {
initialise()
}
}
<html>
<head>
<title>Falldown</title>
</head>
<body>
<canvas id="gamesCanvas" width="360" height="640"></canvas>
<!--script src="test.js"></script-->
</body>
</html>
You can use a switch statement in javascript to handle lots of cases.
Example:
switch(x){
case 1:
//logic here
break;
case 2:
// and so on
break:
default:
break;
}
You can add as many cases as you would like. This will eliminate the need to use if else.
Hope this helps!
I need to add click to my star to turn it green. The variable is called "colorchoice" and I can't figure it out. Its a modified pong game i had to do for a project, i just can't figure out the onclick for the shape, and it needs to be vairable for wherever the star moves to.
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Mayo's Pong Game</title>
</head>
<body bgcolor="grey">
<section>
<div>
<canvas id="canvas" width="500" height="500">
This text is displayed if your browser
does not support HTML5 Canvas.
</canvas>
</div>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
// var context = canvas.getContext('2d');
canvas.addEventListener('mousemove', function(evt) {
var mousePos = getMousePos(canvas, evt);
message = 'LEVEL '+level+' Score= '+score+' Lives= '+lives;
//writeMessage(canvas, message);
paddley=mousePos.y -(rpheight/2);
if (paddley+60 > 500) {
paddley = 440;
}
paddley2=mousePos.y -(lpheight/2);
if (paddley2+60 > 500) {
paddley2 = 440;
}
}, false);
// var canvas;
var ctx;
var x = 250;
var y = 50;
var WIDTH = 520;
var HEIGHT = 520;
var message;
var level=1;
var score = 0;
var lives = 20;
var colorchoice;
function drawStar(cx, cy, spikes, outerRadius, innerRadius) {
var rot = Math.PI / 2 * 3;
var x = cx;
var y = cy;
var step = Math.PI / spikes;
ctx.strokeSyle = "#000";
ctx.beginPath();
ctx.moveTo(cx, cy - outerRadius)
for (i = 0; i < spikes; i++) {
x = cx + Math.cos(rot) * outerRadius;
y = cy + Math.sin(rot) * outerRadius;
ctx.lineTo(x, y)
rot += step
x = cx + Math.cos(rot) * innerRadius;
y = cy + Math.sin(rot) * innerRadius;
ctx.lineTo(x, y)
rot += step
}
ctx.lineTo(cx, cy - outerRadius)
ctx.closePath();
ctx.lineWidth=3;
ctx.strokeStyle=colorchoice;
ctx.stroke();
ctx.fillStyle=colorchoice;
ctx.fill();
}
function circle(x,y,r) {
ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI*2, true);
ctx.fill();
}
function rect(x,y,w,h) {
ctx.beginPath();
ctx.rect(x,y,w,h);
ctx.closePath();
ctx.fill();
}
function clear() {
ctx.clearRect(0, 0, WIDTH, HEIGHT);
}
function init() {
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
return setInterval(draw, 15);
}
function draw() {
clear();
ctx.fillStyle = 'grey';
rect(0,0,WIDTH,HEIGHT);
ctx.fillStyle = 'black';
drawStar(x, y,5,20,10);
writeMessage(canvas,message);
}
function writeMessage(canvas, message) {
var context = canvas.getContext('2d');
//context.clearRect(0, 0, canvas.width, canvas.height);
context.font = '18pt Calibri';
context.fillStyle = 'black';
context.fillText(message, 20, 20);
}
init();
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX,
y: evt.clientY
};
}
</script>
</section>
<p>AUSTIN MAYO'S PONG GAME<p>
Pick a color for your paddles and balls, then click start.<br>
Warning: If you click the start button more than once, difficulty will increase!!!<p>
<button type="button" onclick="alert('PAUSED')">PAUSE</button>
<button type="button" onclick="location.reload();">RESTART</button>
<button type="button" onclick="init(canvas);">START</button>
<br>
<p>GAME MUSIC<BR>
<audio controls>
<source src="SOUNDTRACK.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
I have a rectangle (which should appear) on a canvas, that I want to move from side to side of the canvas. The code I have atm however isn't working, as nothing is showing up at all! Any help would be appreciated, cheers!
<!DOCTYPE html>
<html>
<head>
<title>Simple animations in HTML5</title>
<!--<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.fillStyle = "blue";
context.fillRect (20, 50, 200, 100);
</script> -->
<script>
function drawMessage()
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.fillStyle = "blue";
context.fillRect(x, y, WIDTH, HEIGHT);
context.fillStyle = "white";
context.font = "30px Arial";
context.fillText ("Hello World", MESSAGE_WIDTH, MESSAGE_HEIGHT);
x += dx;
y += dy;
if(x <= 0 || x >= 500)
{
dx = -dx;
}
if(y <= 0 || y >= 200)
{
dy = -dy
}
function animate()
{
return setInterval(drawMessage, 10);
}
</script>
</head>
<body>
<h2> Optical Illusion </h2>
<video id="illusion" width="640" height="480" controls>
<source src="Illusion_movie.ogg">
</video>
<div id="buttonbar">
<button onclick="changeSize()">Big/Small</button>
</div>
<p>
Watch the animation for 1 minute, staring at the centre of the image. Then look at something else near you.
For a few seconds everything will appear to distort.
Source: Wikipedia:Illusion movie
</p>
<script type="text/javascript">
var myVideo=document.getElementById("illusion");
var littleSize = false;
function changeSize()
{
myVideo.width = littleSize ? 800 : 400;
littleSize = !littleSize;//toggle boolean
}
</script>
<canvas id="myCanvas" width="500" height="500">
</canvas>
<!--<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.fillStyle = "blue";
context.fillRect(20, 50, 200, 100);
context.fillStyle = "white";
context.font = "30px Arial";
context.fillText ("Hello World", 35, 110);
</script> -->
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var x = 20; // x coordinate of box position
var y = 50; // y coordinate of box position
var dx = 2; // amount to move box to the right
var dy = 4; // amount to move box down
var WIDTH = 500; // width of canvas
var HEIGHT = 200; // height of canvas
var MESSAGE_WIDTH = 200; // width of message
var MESSAGE_HEIGHT = 100; // height of message
animate(); // run the animation
</script>
</body>
</html>
It seems to me like the first script portion of your code might be missing curly braces.
Specifically, the portion:
function drawMessage()
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.fillStyle = "blue";
context.fillRect(x, y, WIDTH, HEIGHT);
context.fillStyle = "white";
context.font = "30px Arial";
context.fillText ("Hello World", MESSAGE_WIDTH, MESSAGE_HEIGHT);
x += dx;
y += dy;
if(x <= 0 || x >= 500)
{
dx = -dx;
}
if(y <= 0 || y >= 200)
{
dy = -dy
}
Might work better as:
function drawMessage()
{
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.fillStyle = "blue";
context.fillRect(x, y, WIDTH, HEIGHT);
context.fillStyle = "white";
context.font = "30px Arial";
context.fillText ("Hello World", MESSAGE_WIDTH, MESSAGE_HEIGHT);
x += dx;
y += dy;
if(x <= 0 || x >= 500)
{
dx = -dx;
}
if(y <= 0 || y >= 200)
{
dy = -dy
}
}