How do I interchange function doMouseDown() in HTML5 canvas
I am trying to create a painting game with HTML5 canvas.
I want the first button to call a function that draws a line when I click
on the canvas. I want the second button to call a function that draws a
circle when I click on the canvas.
I can build the game from there if I can figure out how to interchange
"function doMouseDown()".
It won't work for me.
Here is some of my code:
<head>
<meta charset="UTF-8">
<title>Home</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<style>
canvas
{
border: 2px solid black;
}
</style>
<script>
// the setup canvas function runs when the document is loaded.
var context;
function setupCanvas()
{
function initialise() {
var canvas =document.getElementById("myCanvas");
context = canvas.getContext("2d");
canvas.addEventListener("mousedown", doMouseDown, true);
var coordinateX;
var coordinateY;
}
function doMouseDown(event)
{
coordinateX= event.pageX;
coordinateY= event.pageY;
context.fillRect(coordinateX, coordinateY, 100, 100);
context.strokeRect(coordinateX, coordinateY, 100, 100);
}
function doMouseDown(event2)
{
coordinateX= event.pageX;
coordinateY= event.pageY;
context.beginPath();
context.arc(coordinateX, coordinateY, 150, 0, Math.PI, false);
context.stroke();
}
</script>
</head>
<body onload = "setupCanvas(); initialise()">
<canvas id="myCanvas" height='400' width='400'>
</canvas>
<p>
<input type="button" onclick="doMouseDown(event);" value="Line">
<input type="button" onclick="doMouseDown(event2);" value="Circle">
</p>
No comments:
Post a Comment