canvas - Error - Using Javascript and HTML canvases to make a mouse event drawing function -


i new html canvases, have verified code , functions, or thought had, , yet there still no output on website. it's supposed khanacademy draw function, user can select html <input>s change colors, widths, shapes, etc., , move mouse around screen draw shape color...

i have no idea wrong, although when 'inspect element' in google chrome, says uncaught syntaxerror: unexpected identifier - games/drawing_shapes/js/draw_shapes.js:99. line 99 bottom 1 (mouse event function) , i'm guessing means $. i'm sorry code, i'll try organize best 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 html give user option edit colors , forth, use color below, use above colors options once 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 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 not support game structure.</canvas> </body> </html>

maybe need put script in <head> tag, or after <canvas>? don't think that's it, though. thanxxxxxxx ton in advance whoever contributes post , organized , didn't make silly mistake.

just missing paren close ready call.

$(document).ready(function() {    initialize(); }); $(document).mousemove(onmousemove);

or move mousemove setting inside function. either way, need close , adding semicolon idea.

in response comment - think missing call connect mousemove drawing routine. fun, added

  drawcircle(shape_x,shape_y,math.random()*10);

in onmousemove conditional block. did expected.


Comments

Post a Comment

Popular posts from this blog

javascript - jquery or ashx not working -

i using ajax file upload control. it creating html: <form action="/pages/handlers/asyncfileuploadhandler.ashx" method="post" enctype="multipart/form-data" target="ajaxuploader-iframe-1397144545"> <input type="hidden" name="type" value="mindvoice"> <input type="file" id="imagefile" style="display: block; width: 80%; margin-right: auto; margin-left: auto;"> </form> and target is: <iframe width="0" height="0" style="display:none;" name="ajaxuploader-iframe-1397144545" id="ajaxuploader-iframe-1397144545"></iframe> the form submitted using .submit() . my ashx handler: <%@ webhandler language="c#" class="asyncfileuploadhandler" %> using system; using system.web; using nettpals.core; public class asyncfileuploadhandler : ihttphandler { public void processre...
Read more

opencv - DataType<cv::detail::deriv_type>::depth what is it used for -

i wondering why line used in lucas kanade tracker in opencv: datatype<cv::detail::deriv_type>::depth can explain me? in opencv, depth of mat refers type of data contained in mat 's data buffer. represented integer values correspond given data type. these integers commonly abstracted appropriate macro definition (e.g. uchar data represented macro cv_8u ). cv::datatype type-traits class provides method obtain corresponding integer value without having memorize macro means data type. there few cases user code needs use datatype::depth . more common datatype::type . a simple example shows 1 possible use of datatype::depth : cv::mat uchar_data = cv::mat::ones(3, 3, cv_8uc1); cv::mat float_data; uchar_data.convertto(float_data, cv::datatype<float>::depth); // ^^ equivalently replaced // cv_32f macro float_data.at<float>(0,1) += 0.5f; std::cout << float_data << std::endl;...
Read more

python 3.x - Mapping specific letters onto a list of words -

can please suggest approach write piece of codes automatically maps letter in letter_str onto dic_key (a dict key string type contains dashes match length of words in word_lst)? so, mapping occurs if letter appears in every words in list @ same position no matter how many words in list. if no letter appears @ position words in word list new_dic_key '----'. please see examples below thanks word_lst = ['ague', 'bute', 'byre', 'came', 'case', 'doze'] dic_key = '----' letters_str ='abcdefghijklmnopqrstuvwxyz' new_dic_key = '---e' if word_list = ['bute', 'byre'] new_dic_key = 'b--e' or word_list = ['drek', 'drew', 'dyes'] new_dic_key = 'd-e-' if words in word_list of same length code give want: word_list = ['drek', 'drew', 'dyes'] cols = [] in range(len(word_list[0])): cols.append([]) word in ...
Read more