Paint для мобильного телефона.

[ТвердолобыйЛамер]

Всем привет , в одной умной книШке "HTML 5 Недостающее руководство "
нашел такой код, но проблемa в том , что он работает в браузере , но не работает в мобильном тел. Если я правилно понял , то в мобильнике не распознаются события мыши. Но как переделать код под мобильны, пока ума не хватает. Был бы рад помощи. Спасибо .

var canvas;
var context;

window.onload = function()
{
	// Get the canvas and the drawing context.
	canvas = document.getElementById("drawingCanvas");
	context = canvas.getContext("2d");

	// Attach the events that you need for drawing.
	canvas.onmousedown = startDrawing;
	canvas.onmouseup = stopDrawing;
	canvas.onmouseout = stopDrawing;
	canvas.onmousemove = draw;
};

var isDrawing = false;

function startDrawing(e)
{
	// Start drawing.
	isDrawing = true;

	// Create a new path (with the current stroke color and stroke thickness).
	context.beginPath();

	// Put the pen down where the mouse is positioned.
	context.moveTo(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop);
}

function stopDrawing()
{
	isDrawing = false;
}

function draw(e)
{
	if (isDrawing == true)
	{
		// Find the new position of the mouse.
		var x = e.pageX - canvas.offsetLeft;
		var y = e.pageY - canvas.offsetTop;

		// Draw a line to the new position.
		context.lineTo(x, y);
		context.stroke();
	}
}

// Keep track of the previous clicked <img> element for color.
var previousColorElement;

function changeColor(color, imgElement)
{
	// Change the current drawing color.
	context.strokeStyle = color;

	// Give the newly clicked <img> element a new style.
	imgElement.className = "Selected";

	// Return the previously clicked <img> element to its normal state.
	if (previousColorElement != null) previousColorElement.className = "";
	previousColorElement = imgElement;
}

// Keep track of the previous clicked <img> element for thickness.
var previousThicknessElement;

function changeThickness(thickness, imgElement)
{
	// Change the current drawing thickness.
	context.lineWidth = thickness;

	// Give the newly clicked <img> element a new style.
	imgElement.className = "Selected";

	// Return the previously clicked <img> element to its normal state.
	if (previousThicknessElement != null) previousThicknessElement.className = "";
	previousThicknessElement = imgElement;
}


function clearCanvas()
{
	context.clearRect(0, 0, canvas.width, canvas.height);
}

function saveCanvas()
{
	// Find the <img> element.
	var imageCopy = document.getElementById("savedImageCopy");

	// Show the canvas data in the image.
	imageCopy.src = canvas.toDataURL();

	// Unhide the <div> that holds the <img>, so the picture is now visible.
	var imageContainer = document.getElementById("savedCopyContainer");
	imageContainer.style.display = "block";
}

[рони]

ТвердолобыйЛамер,
https://developer.mozilla.org/en-US/...I/Touch_events

[ТвердолобыйЛамер]

Спасибо , и что мне это даст? На моем примере никак нельзя подсказать?

[ТвердолобыйЛамер]

На первой же строке ошибка

[рони]

ТвердолобыйЛамер,

var canvas;
var context;

window.onload = function()
{
	// Get the canvas and the drawing context.
	canvas = document.getElementById("drawingCanvas");
	context = canvas.getContext("2d");

	// Attach the events that you need for drawing.

    canvas.addEventListener("touchstart", startDrawing, false);
    canvas.addEventListener("touchend", stopDrawing, false);
    canvas.addEventListener("touchcancel", stopDrawing, false);
    canvas.addEventListener("touchmove", draw, false);




};

var isDrawing = false;

function startDrawing(e)
{
	// Start drawing.
	isDrawing = true;

	// Create a new path (with the current stroke color and stroke thickness).
	context.beginPath();

	// Put the pen down where the mouse is positioned.
	context.moveTo(e.targetTouches[0].pageX - canvas.offsetLeft, e.targetTouches[0].pageY - canvas.offsetTop);
}

function stopDrawing()
{
	isDrawing = false;
}

function draw(e)
{
	if (isDrawing == true)
	{
		// Find the new position of the mouse.
		var x = e.targetTouches[0].pageX - canvas.offsetLeft;
		var y = e.targetTouches[0].pageY - canvas.offsetTop;

		// Draw a line to the new position.
		context.lineTo(x, y);
		context.stroke();
	}
}

// Keep track of the previous clicked <img> element for color.
var previousColorElement;

function changeColor(color, imgElement)
{
	// Change the current drawing color.
	context.strokeStyle = color;

	// Give the newly clicked <img> element a new style.
	imgElement.className = "Selected";

	// Return the previously clicked <img> element to its normal state.
	if (previousColorElement != null) previousColorElement.className = "";
	previousColorElement = imgElement;
}

// Keep track of the previous clicked <img> element for thickness.
var previousThicknessElement;

function changeThickness(thickness, imgElement)
{
	// Change the current drawing thickness.
	context.lineWidth = thickness;

	// Give the newly clicked <img> element a new style.
	imgElement.className = "Selected";

	// Return the previously clicked <img> element to its normal state.
	if (previousThicknessElement != null) previousThicknessElement.className = "";
	previousThicknessElement = imgElement;
}


function clearCanvas()
{
	context.clearRect(0, 0, canvas.width, canvas.height);
}

function saveCanvas()
{
	// Find the <img> element.
	var imageCopy = document.getElementById("savedImageCopy");

	// Show the canvas data in the image.
	imageCopy.src = canvas.toDataURL();

	// Unhide the <div> that holds the <img>, so the picture is now visible.
	var imageContainer = document.getElementById("savedCopyContainer");
	imageContainer.style.display = "block";
}

[ТвердолобыйЛамер]

Огромаднейшее спасибо! Работает. Теперь буду разбираться с кодом. )