How to add touch event to HTML5 canvas color wheel?

Question

I am trying to make a touch event for iOS mobile with the HTML5 Canvas color wheel, but cannot make it work.

I am using the code: http://www.script-tutorials.com/html5-color-picker-canvas/

I changed the mousemove event to touch move , but this does not work. What am I wrong?

  /** * * HTML5 Color Picker * * Licensed under the MIT license. * http://www.opensource.org/licenses/mit-license.php * * Copyright 2012, Script Tutorials * http://www.script-tutorials.com/ */ $(function(){ var bCanPreview = true; // can preview // create canvas and context objects var canvas = document.getElementById('picker'); var ctx = canvas.getContext('2d'); // drawing active image var image = new Image(); image.onload = function () { ctx.drawImage(image, 0, 0, image.width, image.height); // draw the image on the canvas } // select desired colorwheel var imageSrc = 'images/colorwheel1.png'; image.src = imageSrc; $('#picker').touchmove(function(event) { // mouse move handler event.preventDefault(); var touch = event.originalEvent.changedTouches[0]; if (bCanPreview) { // get coordinates of current position var canvasOffset = $(canvas).offset(); var canvasX = Math.floor( touch.pageX - canvasOffset.left); var canvasY = Math.floor( touch.pageY - canvasOffset.top); // get current pixel var imageData = ctx.getImageData(canvasX, canvasY, 1, 1); var pixel = imageData.data; // update preview color var pixelColor = "rgb("+pixel[0]+", "+pixel[1]+", "+pixel[2]+")"; $('.preview').css('backgroundColor', pixelColor); // update controls $('#rVal').val(pixel[0]); $('#gVal').val(pixel[1]); $('#bVal').val(pixel[2]); $('#rgbVal').val(pixel[0]+','+pixel[1]+','+pixel[2]); var dColor = pixel[2] + 256 * pixel[1] + 65536 * pixel[0]; $('#hexVal').val('#' + ('0000' + dColor.toString(16)).substr(-6)); } }); $('#picker').click(function(e) { // click event handler bCanPreview = !bCanPreview; }); $('.preview').click(function(e) { // preview click $('.colorpicker').fadeToggle("slow", "linear"); bCanPreview = true; }); }); 

HTML5 color wheel markup:

 <div class="container"> <!-- preview element --> <div class="preview"></div> <!-- colorpicker element --> <div class="colorpicker"> <canvas id="picker" var="1" width="300" height="300"></canvas> <div class="controls" style="display: none;"> <div><label>R</label> <input type="text" id="rVal" /></div> <div><label>G</label> <input type="text" id="gVal" /></div> <div><label>B</label> <input type="text" id="bVal" /></div> <div><label>RGB</label> <input type="text" id="rgbVal" /></div> </div> </div> </div> 

Answer 1

touchmove not a valid event name.

You might want to use touch .