HTML and CSS Reference
In-Depth Information
function mouse_moved (ev) {
var x, y;
// Get the mouse position in the canvas
x = ev.pageX;
y = ev.pageY;
if (begin_drawing) {
context.beginPath();
context.arc(x, y, 7, (Math.PI/180)*0, (Math.PI/180)*360, false);
context.fill();
context.closePath();
}
}
function mouse_released (ev) {
begin_drawing = false;
}
function touch_move_gesture (ev) {
// For touchscreen browsers/readers that support touchmove
var x, y;
context.beginPath();
context.fillStyle = colorChosen.innerHTML;
if(ev.touches.length == 1){
var touch = ev.touches[0];
x = touch.pageX;
y = touch.pageY;
context.arc(x, y, 7, (Math.PI/180)*0, (Math.PI/180)*360, false);
context.fill();
}
}
function colorPressed(e) {
var color_button_selected = e.target;
var color_id = color_button_selected.getAttribute('id');
colorChosen.innerHTML = color_id;
}
function resetPressed(e) {
theCanvas.width = theCanvas.width; // Reset grid
drawScreen();
}
}
You can experiment with the Finger Painting app
on examples.oreilly.com
.
Fig-
ure 1-5
shows a completed drawing in the Finger Painting app in the iBooks reader for
iPad.
Pretty cool, right? Although maybe not as impressive as what you can do in some
other
