I am new to HTML canvases, but I have verified all my code and functions, or thought I had, and yet there is still no output on my website. It's supposed to be like the khanacademy draw function, where the user can select html <input>s to change colors, widths, shapes, etc., and then move their mouse around the screen to draw that shape with that color...
I have no idea what is wrong, although when I 'inspect element' in Google Chrome, it says Uncaught SyntaxError: Unexpected identifier - games/drawing_shapes/js/draw_shapes.js:99. Line 99 is the very bottom one (mouse event function) and I'm guessing it means the $.
I'm sorry this is so much code, but I'll try to organize it as best I can:
// VARIABLES //
//shapes
var shape = "circle";
var shape_x;
var shape_y;
var shape_width = 10;
var shape_height = 10;
var circle_radius;
var mouse_x;
var mouse_y;
var style = 'stroke';
//colors
var colors = ["#FF0000", "#FF6600", "#FFFF00", "#00FF00", "#0066FF", "#CC0099", "#663300", "#000000"]; //red orange yellow green blue purple brown black
//I haven't added the html to give the user the option to edit colors and so forth, so I just use the color below, but I will use the above colors as options once I get the script figured out...
var color = "#FF0000";
var background_color = "#FFFFFF";
//canvas
var canvas;
var canvas_width;
var canvas_height;
var canvas_min_x;
var canvas_max_x;
var canvas_min_y;
var canvas_max_y;
//context
var ctx;
//initialize
var initialized = false;
// FUNCTIONS //
function setShapeTo(newShape) {
if (newShape == 'square' || 'circle') {
shape = newShape;
} else {
shape = 'circle';
}
}
function drawCircle(x, y, r) {
ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI * 2, true);
ctx.closePath();
if (style = 'fill') {
ctx.fill();
} else {
ctx.stroke();
}
}
function drawSquare(x, y, w, h) {
ctx.beginPath();
ctx.rect(x, y, w, h);
ctx.closePath();
if (style = 'fill') {
ctx.fill();
} else {
ctx.stroke();
}
}
function reset() {
ctx.clearRect(0, 0, canvas_width, canvas_height);
drawRectangle(0, 0, canvas_width, canvas_height);
}
function drawStage() {
ctx.fillStyle = color;
ctx.strokeStyle = color;
circle_radius = shape_width / 2;
/*shape_height = shape_width;*/
if (shape == 'square') {
drawSquare(shape_x, shape_y, shape_width, shape_height);
} else {
drawCircle(shape_x, shape_y, circle_radius);
}
}
function initialize() {
canvas = document.getElementById('draw_shapes_canvas');
ctx = canvas.getContext('2d');
canvas_width = $("#draw_shapes_canvas").width();
canvas_height = $("#draw_shapes_canvas").height();
canvas_min_x = $("#draw_shapes_canvas").offset().left;
canvas_max_x = canvas_min_x + canvas_width;
canvas_min_y = $("#draw_shapes_canvas").offset().top;
canvas_max_y = canvas_min_y + canvas_height;
initialized = true;
/*interval_id = setInterval(drawStage(), 10);*/
}
function onMouseMove(event) {
if (event.pageX > canvas_min_x && event.pageX < canvas_max_x && event.pageY > canvas_min_y && event.pageY < canvas_max_y && initialized == true) {
shape_x = Math.max(event.pageX - canvas_min_x - (shape_width / 2), 0);
shape_x = Math.min(canvas_width - shape_width, shape_x);
shape_y = Math.max(event.pageY - canvas_min_y - (shape_height / 2), 0);
shape_y = Math.min(canvas_height - shape_height, shape_y);
}
}
$(document).ready(function() {
initialize();
}
$(document).mousemove(onMouseMove);
Here is the html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MySite.com | Draw Shapes</title>
<link type="text/css" rel='stylesheet' href='css/draw_shapes-style.css' media="screen">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
</head>
<body>
<script type="text/javascript" src="js/draw_shapes.js"></script>
<canvas id="draw_shapes_canvas" width="500" height="400">Your browser does not support this game structure.</canvas>
</body>
</html>
Maybe I need to put the script in the <head> tag, or after the <canvas>? I don't think that's it, though. Thanxxxxxxx a ton in advance for whoever contributes to this post and hopefully it is organized well and that i didn't make a silly mistake.