Check out the code snippet below:
canvas = document.getElementById("canvas");
ctx = canvas.getContext('2d');
tmp_ctx = element[0].getContext('2d');
element.bind('mousemove touchmove', function(event){
if(drawing){
if(event.offsetX!==undefined){
currentX = event.offsetX;
currentY = event.offsetY;
} else {
currentX = event.layerX - event.currentTarget.offsetLeft;
currentY = event.layerY - event.currentTarget.offsetTop;
}
if(currentTool=="karandaw" || currentTool=="lastik" || currentTool=="brush"){
drawPen(lastX, lastY, currentX, currentY);
}
if(currentTool=="oval"){
console.log("drawing ellipse");
drawEllipse(initX, initY, event.offsetX, event.offsetY);
}
if(currentTool=="crop"){
drawCrop(initX, initY, event.offsetX, event.offsetY);
}
lastX = currentX;
lastY = currentY;
}
});
function drawEllipse(x1, y1, x2, y2){
console.log(tmp_ctx);
tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height);
tmp_ctx.setLineDash([1,0]);
tmp_ctx.beginPath();
tmp_ctx.lineWidth = 3;
tmp_ctx.strokeStyle = 'rgba('+curColor.r+','+curColor.g+','
+curColor.b+','+curColor.a+')';
ctx.globalCompositeOperation='source-over';
var mpx = (x1+x2)/2;
var mpy = (y1+y2)/2;
tmp_ctx.ellipse(mpx, mpy, Math.abs(mpx-x1), Math.abs(mpy-y1), 0, 0, Math.PI*2);
tmp_ctx.stroke();
tmp_ctx.closePath();
}
The code functions correctly on desktop browsers, but it's not rendering anything on mobile devices despite the logs confirming that the drawing functions are being invoked.
I need help identifying any potential errors in the code provided.
HTML for the Canvas Elements:
<div id="canvas_container">
<canvas id="canvas"></canvas>
<canvas id="tmp_canvas" drawing></canvas>
<div id="canvas_area_1" ng-show="canvas_area_1"></div>
<div id="canvas_area_2" ng-show="canvas_area_2"></div>
<div id="canvas_area_3" ng-show="canvas_area_3"></div>
</div>
Additional Information:
EDIT 1: Mobile browser used was Chrome version 47
EDIT 2: The functionality is implemented using a directive with AngularJS. Below is the complete directive code:
app.directive("drawing", function(){
//Directive implementation here...
});