javascript - Canvas eyeDropper -

I need to implement the iDropper tool. I want it so that you click on the iDropper button to activate it , Then it will change the color of my color picker using an onvov and when you click Onclick, it will set the color on the color picker: $ ('# colorpickerHolder') ColorPickerSetColor (EyeDropperColour);

Based on the pixel you are ending, the current will be used using the Dialer Dopper Caller. I am thinking that this is what I have to do on the basis of the layer as I have: Canvas and Canvas Caesar.

I'm looking at this guide but can not I work for my project?

This is my project:

I have:

  var opiate activator = false; Var Eye Draper Clauer;   
 and:  
  $ ("#brush eodropper"). Click (function (if (ophthalmic activate == true) {eyeDropperActive = false;} and if (the eye opener is active == wrong) {eyeDropperActive = true;}});    
 
 
  Creating a canvas ???? ????? ????? ???   
 
  getPixelColor (x, y) {var pxData = ctx.getImageData (X, Y, 1,1); Return ("rgb (" + pxData.data [0] + "," + pxData.data [1] + "," + pxData.data [2] + ")");}   
 The rest just paint with one click on the canvas Controlling is accepted on acceptance.  
  var eyedropperIsActive = false; // When the #startDropper button is clicked on $ ("#start Draper"), read Pixel colors activated Click (function (e) {IDropperISActive = true;}); // If the device is active, then report color under mouse $ ("# canvas"). Mausamave (function (e) {handleMouseMove (e );}); // When the user clicks on the canvas, close the tool // (the last color will be selected) $ ("# canvas "). Click (function (e) {idropperISactive = false};);   
 And here's the Mousemwe event handler which calls the GCixel coral and reports that color  
  // If the device is active, then someone under the mouse function Also report color HandleMouseMove (E.) (if;! IDropperIsActive) (return;} mousex = parseint (E.Clinks X-Offset X); Katar = parseInt (e.clientY-offsetY); // Keep your Mousemov stuff here ; Var idropcore = nickel pixel collar (mousex, mousse); $ ("# result") css ("page The code here is a bella:  
    
 & Lt; html & gt; & lt; top & gt; & lt; link rel = "stylesheet" type = "text / css" media = "all" href = "css / reset.css" /> & gt; ;! - Reset css - & gt; & lt; script type = "text / javascript" src = "http://code.jquery.com/jquery.min.js"> gt; & lt; / script & gt; & Lt; style & gt; body {background color: ivory; padding: 30px;} canvas {range: 1px solid red;} # rusts {width: 30px; Height: 30px; Border: 1px solid blue;} & lt; / Style & gt; & Lt; Script & gt; $ (Function () {var canvas = document.getElementById ("canvas"); var ctx = canvas.getContext ("2d") var canvasoffset = $ ("# canvas") offset (); var offsetX = left canvasoffset; Work Offset Y = Canvas Offset.Top; And Iidropper ISActive = False; Detect Test Cooles (20,20, "Red"); Draft Concers (10020, "Green"); Draft calls (18020, "Blue") ; Function Duetest Coilers X, y, Color) {ctx.beginPath (ctx.fillStyle = color; ctx.rect (x, y, 50,50); ctx.fill ();} getPixelColor (x, y) {var PxData = Ctx.getImageData (x, y, 1,1); return ("RGB (" + pxData.data [0] + "," + pxData.data [1] + "," + pxData.data [2] + ") "};}; (); (If;! IdropperIsActive) (return;} mousex = parseint (e.clinks x-offset x); mouse u = parseint (eclityy-offset y); // $ (" $ ("# Canvas"); $ ("# canvas") .moonmew (function (e) {handelmysmov (e);}); $ ("#start drapper") Click (Fun ction (e) {eyedropperIsActive = True});}); // and $ (function () {}); & lt; / script & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; P & gt; Click "Activate Identify" to read the pixel color under the mouse. & Lt; / P & gt; & Lt; P & gt; To set the color, click on the canvas and activate the i-dropper & lt; / P & gt; & Lt; Canvas id = "canvas" width = 300 height = 300 & gt; & Lt; / Canvas & gt; & Lt; Br> & Lt; Button id = "startdropper" & gt; Active eyedropper & lt; / Button & gt; & Lt; Div id = "result" width = 30 height = 30> & amp; Nbsp; & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt;