How to draw in javascript canvas and compare it to a shape? -

-

so keep short i'm wondering how able track user drawing moment click when let go , compare check accuracy say, perfect circle?

would possible, , if best ways check accuracy compared perfect circle , how?

also thinking of if user has drawn circle start , end points don't meet, maybe draw line connect them, etc?

i did "stay inside text" game while back. try trace number. more stay inside lines while tracing, higher score is.

you're welcome start , modify needed. :-)

enter image description here

var canvas=document.getelementbyid("canvas");  var ctx=canvas.getcontext("2d");  var $canvas=$("#canvas");  var canvasoffset=$canvas.offset();  var offsetx=canvasoffset.left;  var offsety=canvasoffset.top;  var scrollx=$canvas.scrollleft();  var scrolly=$canvas.scrolltop();      ctx.font="216px arial";  ctx.fillstyle="white";  ctx.filltext("2",100,200);  ctx.stroketext("2",100,200);    var cw=canvas.width;  var ch=canvas.height;  var imgdata=ctx.getimagedata(0,0,cw,ch);  var data=imgdata.data;    var isdown=false;  var wasinside=true;  var score=0;    function draw(mousex,mousey){      var alpha = data[((cw*mousey)+mousex)*4+3];      score+=(alpha>19?1:-1);      if(alpha<20 && wasinside){      wasinside=false;      ctx.fillstyle="white";      ctx.fillrect(0,0,cw,ch);      ctx.fillstyle="white";      ctx.filltext("2",100,200);      ctx.stroketext("2",100,200);    }else if(alpha>19 && !wasinside){      wasinside=true;      ctx.fillstyle="white";      ctx.fillrect(0,0,cw,ch);      ctx.fillstyle="green";      ctx.filltext("2",100,200);      ctx.stroketext("2",100,200);    }    }    function handlemousedown(e){    e.preventdefault();    mousex=parseint(e.clientx-offsetx);    mousey=parseint(e.clienty-offsety);    var alpha = data[((cw*mousey)+mousex)*4+3];    wasinside=(alpha<20);    score=0;    isdown=true;    draw(mousex,mousey);  }    function handlemouseup(e){    e.preventdefault();    isdown=false;    $("#score").text("score: "+score);  }    function handlemouseout(e){    e.preventdefault();    isdown=false;  }    function handlemousemove(e){    if(!isdown){return;}    e.preventdefault();    mousex=parseint(e.clientx-offsetx);    mousey=parseint(e.clienty-offsety);    draw(mousex,mousey);  }    $("#canvas").mousedown(function(e){handlemousedown(e);});  $("#canvas").mousemove(function(e){handlemousemove(e);});  $("#canvas").mouseup(function(e){handlemouseup(e);});  $("#canvas").mouseout(function(e){handlemouseout(e);});    $(window).scroll(function(){      var bb=canvas.getboundingclientrect();      offsetx=bb.left;      offsety=bb.top;  });
body{ background-color: white; }  #canvas{border:1px solid red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  <h4>drag inside number<br>number stays green while you're inside.</h4>  <h3 id="score">score:</h3>  <canvas id="canvas" width=300 height=300></canvas>


Comments

Post a Comment

Popular posts from this blog

java - Could not locate OpenAL library -

-
i writing game using slick2d library, uses lwjgl. lwjgl version 2.9.3. using netbeans 8. i tried adding sounds game, example music track on main menu. problem is, exception when run game, despite game still compiling , running except sound of course: sat mar 21 01:23:57 edt 2015 error:could not locate openal library. org.lwjgl.lwjglexception: not locate openal library. @ org.lwjgl.openal.al.create(al.java:156) @ org.lwjgl.openal.al.create(al.java:156) @ org.lwjgl.openal.al.create(al.java:102) @ org.lwjgl.openal.al.create(al.java:206) @ org.newdawn.slick.openal.soundstore$1.run(soundstore.java:295) @ java.security.accesscontroller.doprivileged(native method) @ org.newdawn.slick.openal.soundstore.init(soundstore.java:292) @ org.newdawn.slick.music.<init>(music.java:156) @ org.newdawn.slick.music.<init>(music.java:75) @ view.mainmenu.init(mainmenu.java:58) i didn't include rest of error states error happens in game code. the...
Read more

c++ - Delete matches in OpenCV (Keypoints and descriptors) -

-
i want check scene image against 2 train images. that, detect features , compute descriptors of both training images. before detecting, computing , matching scene image, delete matches of train1 , train2. because these matches won't facilitate matching of scene image train1 , train2. so, match train1 train2 , vector of matches trainidx , queryidx. how can delete these matches in keypoints-vector , descriptor matrix of train1 , train2? best regards, dwi i have done below: std::vector<cv::keypoint> keypoints[2]; cv::mat descriptor[2]; std::vector< cv::dmatch > matches; /* write code generate keypoints, descriptors , matches here... keypoint[0] -> train image 1 keypoints keypoint[1] -> train image 2 keypoints descriptor[0] -> train image 1 descriptors descriptor[1] -> train image 2 descriptors matches -> matched between train image 1 , 2 */ // logic keep unmatched keypoints , corresponding descriptor...
Read more

sorting - opencl Bitonic sort with 64 bits keys -

-
i used nvidia sdk bitonic sort , works great me. 32 bits (uint) need ulong keys. have typically 2^14 keys @ time , power of 2. searched on not find kernel designed ulong. i tried modified nvidia sdk bitonic sort using ulong keys not work. kernel not crash after de call clenqueuendrangekernel got error : cl_invalid_command_queue can tell me how modify bitonic sort or radixsort, or can sort ulong keys? i running nvidia quadro 4000 opencl 1.1 cuda 6.5.20 full_profile used original nvidia sdk bitonicsort.cl i used"ulong" keys , value input , ouput instead of "uint" thanks helping i made work-around suit need. used 30 bits of key , 18 high bits of value sorting. changed comparators (2 lines): '#define mask 0xffffc000 // suit need from this: if( (*keya > *keyb) == dir ) this: if(((*keya > *keyb)||((*keya == *keyb)&&((*vala & mask)> (*valb & mask)))) == dir ) it works fine. but, still, it's work-a...
Read more