I have one circle that movable in canvas, and the circle is not the set position. It is created in any place when the mouse is clicked. I am trying to create two circles (pink and yellow) in a set position, and I want to create the circles drag-gable (mouse click -> able to move X, Y positions ) to any places on the canvas. How can I attempt this?
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
canvas.addEventListener('mousedown', function(e) {
this.down = true;
this.X = e.pageX;
this.Y = e.pageY;
}, 0);
canvas.addEventListener('mouseup', function() {
this.down = false;
}, 0);
canvas.addEventListener('mousemove', function(e) {
if (this.down) {
// clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.arc(this.X, this.Y, 50, 0, 2 * Math.PI, true);
ctx.fillStyle = "#FF6A6A";
ctx.fill();
ctx.stroke();
this.X = e.pageX;
this.Y = e.pageY;
}
}, 0);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Canvas</title>
</head>
<body>
<canvas id="canvas" style='background-color:#EEE;' width='500px' height='200px'></canvas>
</body>
</html>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var model = {
circle1: { x: 200, y: 200 },
circle2: { x: 200, y: 200 }
};
var radius = 50;
function view(ctx, model) {
function circle(c) {
ctx.beginPath();
ctx.beginPath();
ctx.arc(c.x, c.y, radius, 0, 2 * Math.PI, true);
ctx.fillStyle = "#FF6A6A";
ctx.fill();
ctx.stroke();
}
// clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
circle(model.circle1);
circle(model.circle2);
}
function redraw() {
view(ctx, model);
}
redraw();
function getCircleForPosition(x, y) {
function intersect(a, b) {
var d2 = Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2);
r2 = Math.pow(radius, 2);
return d2 < r2;
}
return [model.circle1, model.circle2].find(circle => intersect(circle, { x, y }));
}
canvas.addEventListener('mousedown', function(e) {
model.dragging = getCircleForPosition(e.pageX, e.pageY);
}, 0);
canvas.addEventListener('mouseup', function() {
model.dragging = undefined;
}, 0);
canvas.addEventListener('mousemove', function(e) {
if (model.dragging) {
model.dragging.x = e.pageX;
model.dragging.y = e.pageY;
redraw();
}
}, 0);
<canvas id="canvas" style='background-color:#EEE;' width='500px' height='500px'></canvas>
fiddle: https://jsfiddle.net/eguneys/qgwtaL2p/18/
Related
I made this simple example of a drag-and-drop circle inside an HTML canvas. Here's the code below:
var c = document.getElementById('myCanvas');
var ctx = c.getContext('2d');
width = c.width = window.innerWidth * 0.9;
height = c.height = window.innerHeight * 0.9;
var handle = {
x: width / 2,
y: height / 2,
radius: 30,
};
function draw() {
ctx.clearRect(0, 0, width, height);
ctx.beginPath();
ctx.arc(handle.x, handle.y, handle.radius, 0, Math.PI * 2, false);
ctx.fill();
ctx.stroke();
drawLines();
}
function drawLines() {
ctx.beginPath();
ctx.moveTo(0, height / 2);
ctx.lineTo(width, height / 2);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(width / 6, 0);
ctx.lineTo(width / 6, height);
ctx.stroke();
}
function circlePointCollision(x, y, circle) {
return distanceXY(x, y, circle.x, circle.y) < circle.radius;
}
function distanceXY(x0, y0, x1, y1) {
var dx = x1 - x0,
dy = y1 - y0;
return Math.sqrt(dx * dx + dy * dy);
}
document.addEventListener('mousedown', function (e) {
if (circlePointCollision(e.x , e.y , handle)) {
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp);
}
});
function onMouseMove(e) {
handle.x = e.pageX;
handle.y = e.pageY;
draw();
}
function onMouseUp() {
document.removeEventListener('mousemove', onMouseMove);
document.removeEventListener('mouseup', onMouseUp);
}
draw();
drawLines();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" style="border: 1px solid black"></canvas>
<script src="./script.js"></script>
</body>
</html>
I created this with a help of some resources from this video and these are the materials they used. I'm trying to write a proof of concept for snap functionality. Basically, I want to make that circle "snap" in the middle of the crossing two lines when it's being moved across (or very close to). When it's snapped in the intersection, it should be a little bit harder to move it from there. Due to being relatively new to HTML canvas, I'm not exactly sure what the best approach is.
Can anyone help me to expand my snippet and make it do what I need?
Before assigning handle.x and handle.y in onMouseMove simply compare e.pageX and e.pageY to the intersection point and if they are close enough set the the handle coordinates to the intersection instead of e.pageX and e.pageY.
I've created local variables here as an example, but of course you would want to either have a snap function that maintained the threshold and a list of intersections (or a grid declaration of some sort) to check against or declare threshold and intersection globally and check against them.
function onMouseMove(e) {
const threshold = handle.radius * 0.8;
const intersection = { x: width / 6, y: height / 2 }
handle.x = distanceXY(e.pageX, e.pageY, intersection.x, intersection.y) < threshold ? intersection.x : e.pageX;
handle.y = distanceXY(e.pageX, e.pageY, intersection.x, intersection.y) < threshold ? intersection.y : e.pageY;
draw();
}
var c = document.getElementById('myCanvas');
var ctx = c.getContext('2d');
width = c.width = window.innerWidth * 0.9;
height = c.height = window.innerHeight * 0.9;
var handle = {
x: width / 2,
y: height / 2,
radius: 30,
};
function draw() {
ctx.clearRect(0, 0, width, height);
ctx.beginPath();
ctx.arc(handle.x, handle.y, handle.radius, 0, Math.PI * 2, false);
ctx.fill();
ctx.stroke();
drawLines();
}
function drawLines() {
ctx.beginPath();
ctx.moveTo(0, height / 2);
ctx.lineTo(width, height / 2);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(width / 6, 0);
ctx.lineTo(width / 6, height);
ctx.stroke();
}
function circlePointCollision(x, y, circle) {
return distanceXY(x, y, circle.x, circle.y) < circle.radius;
}
function distanceXY(x0, y0, x1, y1) {
var dx = x1 - x0,
dy = y1 - y0;
return Math.sqrt(dx * dx + dy * dy);
}
document.addEventListener('mousedown', function (e) {
if (circlePointCollision(e.x, e.y, handle)) {
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp);
}
});
function onMouseMove(e) {
const threshold = handle.radius * 0.8;
const intersection = { x: width / 6, y: height / 2 }
handle.x = distanceXY(e.pageX, e.pageY, intersection.x, intersection.y) < threshold ? intersection.x : e.pageX;
handle.y = distanceXY(e.pageX, e.pageY, intersection.x, intersection.y) < threshold ? intersection.y : e.pageY;
draw();
}
function onMouseUp() {
document.removeEventListener('mousemove', onMouseMove);
document.removeEventListener('mouseup', onMouseUp);
}
draw();
drawLines();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" style="border: 1px solid black"></canvas>
<script src="./script.js"></script>
</body>
</html>
Hi every one I'm trying to make a line follow the mouse move event. I can do this with the ctx.save and restore but i don't know how to do if i want use class and draw other object. In fact whit using save and restore It Work but if i want to have the same result whit class i dont know how to do many thanks
window.onload = function() {
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
width = canvas.width = window.innerWidth,
height = canvas.height = window.innerHeight,
arrowX = width / 2,
arrowY = height / 2,
dx, dy,
angle = 0,
a = 0;
render();
function render() {
arrowX = width / 2 + Math.cos(a) * height * .4;
arrowY = height / 2 + Math.sin(a) * height * .4;
context.clearRect(0, 0, width, height);
context.save();
context.translate(arrowX, arrowY);
context.rotate(angle);
context.beginPath();
context.moveTo(20, 0);
context.lineTo(-20, 0);
context.moveTo(20, 0);
context.lineTo(10, -10);
context.moveTo(20, 0);
context.lineTo(10, 10);
context.stroke();
context.restore();
requestAnimationFrame(render);
}
document.body.addEventListener("mousemove", function(event) {
dx = event.clientX - arrowX;
dy = event.clientY - arrowY;
angle = Math.atan2(dy, dx);
});
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body style="height: 100vh;">
<Canvas id="canvas"></Canvas>
<script src="main.js"></script>
</body>
</html>
If i want use class i start like thaïs on the following code
var canvas = document.getElementById("canvas");
var c = canvas.getContext("2d");
var width = canvas.width = window.innerWidth;
var height = canvas.height = window.innerHeight;
var arrowX = width / 2;
var arrowY = height -20;
var dx;
var dy;
var angle = 0;
class Player{
constructor(x,y,radius,color)
{
this.x=x;
this.y=y;
this.radius=radius;
this.color=color;
}
draw(){
c.beginPath();
c.arc(this.x,this.y,this.radius, 0, Math.PI *2,false );
c.fillStyle=this.color;
c.fill();
}
}
class Shooter{
constructor(x,y,xEnd,yEnd,color){
this.x=x;
this.y=y;
this.xEnd=xEnd;
this.yEnd=yEnd;
this.color=color;
}
draw(){
c.beginPath();
c.moveTo(this.x, this.y);
c.lineTo(this.xEnd, this.yEnd);
c.strokeStyle=this.color;
c.stroke();
}
}
// const player= new Player(arrowX,arrowY,20,'white');
const shooter= new Shooter(arrowX,500,arrowX,arrowY,'white');
let animationId;
function animate(){
animationId=requestAnimationFrame(animate)
c.fillStyle='rgba(0, 0, 0, 0.5)';
c.fillRect(0,0,canvas.width,canvas.height);
//player.draw();
shooter.draw();
}
requestAnimationFrame(animate);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body style="height: 100vh;">
<Canvas id="canvas"></Canvas>
<script src="main.js"></script>
</body>
</html>
I can offer two methods for this. The first is to simply have the end of the vector the same coordinates as the mouse position. This will change the magnitude of the vector of course.
This method does not rotate or translate the context.
var canvas = document.getElementById("canvas");
var c = canvas.getContext("2d");
var width = (canvas.width = window.innerWidth);
var height = (canvas.height = window.innerHeight);
let canvasBounds = canvas.getBoundingClientRect()
let mouse = {x: 0, y: 0}
class Shooter {
constructor(x, y, color) {
this.x = x;
this.y = y;
this.xEnd = mouse.x;
this.yEnd = mouse.y;
this.color = color;
}
draw() {
c.beginPath();
c.moveTo(this.x, this.y);
c.lineTo(this.xEnd, this.yEnd);
c.strokeStyle = this.color;
c.stroke();
}
update() {
this.xEnd = mouse.x;
this.yEnd = mouse.y;
}
}
const shooter = new Shooter(width/2, height/2, "white");
canvas.addEventListener("mousemove", e => {
mouse.x = e.x - canvasBounds.x;
mouse.y = e.y - canvasBounds.y;
});
function animate() {
animationId = requestAnimationFrame(animate);
c.fillStyle = "rgba(0, 0, 0, 0.5)";
c.fillRect(0, 0, canvas.width, canvas.height);
//player.draw();
shooter.draw();
shooter.update();
}
requestAnimationFrame(animate);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body style="height: 100vh;">
<Canvas id="canvas"></Canvas>
<script src="main.js"></script>
</body>
</html>
The second method draws the start point at (0, 0) but then you can use translate to position it where ever you want. This also rotates the context but allows you to keeps the magnitude the same.
var canvas = document.getElementById("canvas");
var c = canvas.getContext("2d");
var width = (canvas.width = window.innerWidth);
var height = (canvas.height = window.innerHeight);
let canvasBounds = canvas.getBoundingClientRect()
let mouse = {x: 0, y: 0}
class Shooter {
constructor(x, y, color) {
this.x = 0;
this.y = 0;
this.xEnd = this.x + 50;
this.yEnd = this.y;
this.translate = {x: x, y: y}
this.color = color;
this.angle = 0;
}
draw() {
this.angle = Math.atan2(mouse.y - this.translate.y, mouse.x - this.translate.x)
c.save();
c.translate(this.translate.x, this.translate.y);
c.rotate(this.angle);
c.beginPath();
c.moveTo(this.x, this.y);
c.lineTo(this.xEnd, this.yEnd);
c.strokeStyle = this.color;
c.stroke();
c.restore()
}
update() {
}
}
const shooter = new Shooter(width/2, height/2, "white");
canvas.addEventListener("mousemove", e => {
mouse.x = e.x - canvasBounds.x;
mouse.y = e.y - canvasBounds.y;
});
function animate() {
requestAnimationFrame(animate);
c.fillStyle = "rgba(0, 0, 0, 0.5)";
c.fillRect(0, 0, canvas.width, canvas.height);
//player.draw();
shooter.draw();
}
requestAnimationFrame(animate);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body style="height: 100vh;">
<Canvas id="canvas"></Canvas>
<script src="main.js"></script>
</body>
</html>
I need to create a dynamic triangle, such that a user is able to grab either a vertex or side and move it. The angle should get updated in real-time. Unfortunately, I have no clue how one can do that. I started out by simply drawing the triangle using the following code.
<!DOCTYPE html>
<html>
<head>
<title>Triangle Canvas Example</title>
</head>
<body>
<canvas id="myCanvas" width="700" height="700"></canvas>
<script>
var canvasElement = document.querySelector("#myCanvas");
var context = canvasElement.getContext("2d");
context.beginPath();
context.strokeStyle = '#0000ff';
context.arc(400, 100, 8, 0, 2 * Math.PI, true);
context.stroke();
context.font = "15px Comic Sans MS";
context.fillStyle = "#0000ff";
context.textAlign = "center";
context.fillText("81", 390, 140);
context.beginPath();
context.arc(200, 300, 8, 0, 2 * Math.PI, true);
context.strokeStyle ='red';
context.stroke();
context.font = "15px Comic Sans MS";
context.fillStyle = "red";
context.textAlign = "center";
context.fillText("49", 230, 300);
context.beginPath();
context.arc(520, 400, 8, 0, 2 * Math.PI, true);
context.strokeStyle ='#008000';
context.stroke();
context.font = "15px Comic Sans MS";
context.fillStyle = "#008000";
context.textAlign = "center";
context.fillText("50", 500, 385);
// the triangle
context.beginPath();
context.moveTo(400, 100);
context.lineTo(200, 300);
context.lineTo(520, 400);
context.closePath();
// the outline
context.lineWidth = 2;
context.strokeStyle = '#666666';
context.stroke();
</script>
</body>
</html>
to get the following image. please see image
the problem is that my code is purely hardcoded, the angle value, the circle, and the triangle. My approach is probably wrong because I cannot see how one can turn all that into one dynamic image. I tried googling to see if someone created something similar but I was unable to find anything useful. Some insight on how to approach this problem would be great (a Youtube video or article would be greatly appreciated).
I created dynamic trinagle but i don't know math. Hope I help you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trinagle</title>
<style>
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
canvas {
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas width="500" height="500"></canvas>
<script>
let mousePosition = [0, 0];
let mouseClicked = false;
let dragged = null;
const getMousePosition = (canvas, event) => {
const rect = canvas.getBoundingClientRect();
const x = Math.min(Math.max(event.clientX - rect.left, 0), canvas.width);
const y = Math.min(Math.max(event.clientY - rect.top, 0), canvas.width);
return [x, y];
}
document.addEventListener('DOMContentLoaded', () => {
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
document.addEventListener('mousemove', (event) => {
mousePosition = getMousePosition(canvas, event);
});
document.addEventListener('mousedown', () => mouseClicked = true);
document.addEventListener('mouseup', () => mouseClicked = false);
const points = [
[50, 200, '#f00'],
[150, 50, '#0f0'],
[200, 150, '#00f'],
];
const radius = 10;
const draw = () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
const [mX, mY] = mousePosition;
for (const [index, [x, y, color]] of points.entries()) {
const hovered = (mX - x) ** 2 + (mY - y) ** 2 < radius ** 2;
const style = hovered ? 'fill' : 'stroke';
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2, true); // Outer circle
ctx[`${style}Style`] = color;
ctx[style]();
if(hovered && mouseClicked) {
dragged = index;
}
if(dragged === index) {
points[index] = [...mousePosition, color];
if(!mouseClicked) dragged = null;
}
}
ctx.beginPath();
ctx.moveTo(points[0][0], points[0][1]);
ctx.lineTo(points[1][0], points[1][1]);
ctx.lineTo(points[2][0], points[2][1]);
ctx.lineTo(points[0][0], points[0][1]);
ctx.strokeStyle = '#000';
ctx.stroke();
window.requestAnimationFrame(draw);
}
window.requestAnimationFrame(draw);
});
</script>
</body>
</html>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var rect = {};
var drag = false;
var storeRects = [];
var isMoving = false;
make_base();
init();
function make_base() {
base_image = new Image();
base_image.src = 'https://www.w3schools.com/css/img_fjords.jpg';
base_image.onload = function() {
context.drawImage(base_image, 0, 0, 800, 500);
}
}
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
function init() {
canvas.addEventListener('mousedown', mouseDown, false);
canvas.addEventListener('mouseup', mouseUp, false);
canvas.addEventListener('mousemove', mouseMove, false);
}
function mouseDown(e) {
rect.startX = e.pageX - this.offsetLeft;
rect.startY = e.pageY - this.offsetTop;
drag = true;
}
function mouseMove(e) {
if(drag) {
isMoving = true;
rect.w = (e.pageX - this.offsetLeft) - rect.startX;
rect.h = (e.pageY - this.offsetTop) - rect.startY ;
draw();
}
}
function draw() {
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(base_image, 0 ,0, 800, 500);
storeRects.forEach(function(rect) {
context.beginPath();
context.rect(rect.x, rect.y,rect.w, rect.h);
context.stroke();
});
context.lineWidth="1";
context.strokeStyle = "red";
context.beginPath();
context.rect(rect.startX, rect.startY, rect.w, rect.h);
context.stroke();
}
function mouseUp() {
drag = false;
if(isMoving === true) {
storeRects.push({
x: rect.startX,
y: rect.startY,
w: rect.w,
h: rect.h,
});
var c = document.getElementById("myCanvasPreview");
var ctx = c.getContext("2d");
var pre_base_image = new Image();
pre_base_image.src = 'https://www.w3schools.com/css/img_fjords.jpg';
ctx.drawImage(pre_base_image,
(Math.min(storeRects[0].x, storeRects[0].x + Math.abs(storeRects[0].w)) / canvas.width) * pre_base_image.width,
(Math.min(storeRects[0].y, storeRects[0].y + Math.abs(storeRects[0].h)) / canvas.height) * pre_base_image.height,
(Math.abs(storeRects[0].w) / canvas.width) * pre_base_image.width ,
(Math.abs(storeRects[0].h) / canvas.height) * pre_base_image.height,
0, 0,
Math.abs(storeRects[0].w),
Math.abs(storeRects[0].h)
);
isMoving = false;
}
}
<canvas id="myCanvas" width="800" height="500" style="border:1px solid #000000;">
</canvas>
<canvas id="myCanvasPreview" width="800" height="500" style="border:1px solid #d3d3d3;">
</canvas>
When I select the person in the image, I would like to preview it on another canvas.
Now, I can preview but seems like the area is not correct.
You need to make sure that you have the correct coordinates. You must specify the top left corner (the min coordinates)
Also you need to scale to the image size.
This will fix the existing code.
ctx.drawImage(pre_base_image,
(Math.min(storeRects[0].x, storeRects[0].x + Math.abs(storeRects[0].w)) / canvas.width) * pre_base_image.width,
(Math.min(storeRects[0].y, storeRects[0].y + Math.abs(storeRects[0].h)) / canvas.height) * pre_base_image.height,
(Math.abs(storeRects[0].w) / canvas.width) * pre_base_image.width ,
(Math.abs(storeRects[0].h) / canvas.height) * pre_base_image.height,
0, 0,
Math.abs(storeRects[0].w),
Math.abs(storeRects[0].h)
);
Check your previous question as I added an answer that takes care of this problem befor you need to do the above code.
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>