WebApp Ipad Html5, Canvas Javascript

Discussion in 'Web Design and Development' started by NoSwitch, Jun 9, 2011.

  1. macrumors newbie

    Joined:
    Jun 9, 2011
    #1
    Hi EveryBody,

    I want to create a Drawing Application for iPad until now is fine.

    With Google Chrome, the application works fine but when i launch the application in my iPad it's doesn't work.

    I use mousedown, mouseover, etc .. in my App but iPad use touchstart, touchend, etc ..

    i'd like to change my mousedown for a touchstart but i don't know very well how can i change that, i'm a beginner in javascript so i require your help

    here your are my code :

    Thanks guys ( sorry for my english i'm a belgian guy ;) )

    Code:
    // Copyright 2010 William Malone (www.williammalone.com)
    //
    // Licensed under the Apache License, Version 2.0 (the "License");
    // you may not use this file except in compliance with the License.
    // You may obtain a copy of the License at
    //
    //   http://www.apache.org/licenses/LICENSE-2.0
    //
    // Unless required by applicable law or agreed to in writing, software
    // distributed under the License is distributed on an "AS IS" BASIS,
    // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    // See the License for the specific language governing permissions and
    // limitations under the License.
    
    var canvas;
    var context;
    var canvasWidth = 1024; // 490
    var canvasHeight = 768; // 220
    var padding = 25;
    var lineWidth = 9;
    var colorVert = "#cdff00";
    var colorJaune = "#fcee21";
    var colorOrange = "#e8630c";
    var colorRose = "#d92958";
    var colorMauve = "#c965ff";
    var colorBleuClair = "#3fa9f5";
    var colorBrun = "#8c6239";
    var colorBlanc = "#ffffff";
    var colorVertFonce = "#34be08";
    var colorJauneFonce = "#edaa14";
    var colorRouge = "#ff0000";
    var colorRoseFonce = "#9e005d";
    var colorMauveFonce = "#a80dff";
    var colorBleuFonce = "#00669a";
    var colorGris = "#808080";
    var colorNoir = "#000000";
    var outlineImage = new Image();
    var VertImage = new Image();
    var JauneImage = new Image();
    var OrangeImage = new Image();
    var RoseImage = new Image();
    var MauveImage = new Image();
    var BleuClairImage = new Image();
    var BrunImage = new Image();
    var BlancImage = new Image(); 
    var VertFonceImage = new Image();
    var JauneFonceImage = new Image();
    var RougeImage = new Image();
    var RoseFonceImage = new Image();
    var MauveFonceImage = new Image();
    var BleuFonceImage = new Image();
    var GrisImage = new Image();
    var NoirImage = new Image();
    var markerImage = new Image();
    var Gomme_Image = new Image();
    var Pinceau_Image = new Image();
    var TailleGrande_Image= new Image();
    var TailleMoyenne_Image= new Image();
    var TaillePetite_Image= new Image();
    var TailleMini_Image= new Image();
    var gommeImageWidth = 200;
    var gommeImageHeight = 140;
    var crayonBackgroundImage = new Image();
    var markerBackgroundImage = new Image();
    var eraserBackgroundImage = new Image();
    var crayonTextureImage = new Image();
    var clickX = new Array();
    var clickY = new Array();
    var clickColor = new Array();
    var clickTool = new Array();
    var clickSize = new Array();
    var clickDrag = new Array();
    var paint = false;
    var curColor = colorVert; // Couleur de dŽpart
    var curTool = "crayon";
    var curSize = "normal";
    var mediumStartX = 79; // Surface cliquable		
    var mediumStartY = 79; // Surface Cliquable
    var mediumImageWidth = 79; // Taille des crayons
    var mediumImageHeight = 79; // Hauteur des 
    var drawingAreaX = 272; // situation X, Y de la surface de dessin
    var drawingAreaY = 51;
    var drawingAreaWidth = 480; // RŽsolution de le surface de dessin
    var drawingAreaHeight = 668;
    var toolHotspotStartY = 23;
    var toolHotspotHeight = 38;
    var sizeHotspotStartY = 157;
    var sizeHotspotHeight = 36;
    var sizeHotspotWidthObject = new Object();
    sizeHotspotWidthObject.huge = 39;
    sizeHotspotWidthObject.large = 25;
    sizeHotspotWidthObject.normal = 18;
    sizeHotspotWidthObject.small = 16;
    var totalLoadResources = 8
    var curLoadResNum = 0;
    var PosX = 70;
    var PosY = 60;
    var Ecart = 79;
    var test01 = 803;
    var test02 = 57;
    var GommeWidth = 170 ;
    var GommeHeight = 114 ;
    var PinceauHeight = 80 ; 
    var PinceauWidth = 240 ;
    var EcartPinceauY = 25 ;
    var EcartPinceauX = 45 ;
    var EcartGommeY = 80 ;
    var EcartGommeX = 75 ;
    var EcartTailleHuge = 32 ;
    var EcartTailleLarge = 22 ;
    var EcartTailleSmall = 26 ;
    var EcartTailleNormal = 26 ;
    var HugeHeightWidth = 74 ;
    var LargeHeightWidth = 50 ;
    var NormalHeightWidth = 34 ; 
    var SmallHeightWidth = 18 ;
    var EcartHugeX = 94 ;
    var EcartLargeX = 106 ;
    var EcartNormalX = 114 ;
    var EcartSmallX = 122 ;
    
    
    
    /**
    * Calls the redraw function after all neccessary resources are loaded.
    */
    function resourceLoaded()
    {
    	if(++curLoadResNum >= totalLoadResources){
    		redraw();
    	}
    }
    	
    
    /**
    * Creates a canvas element, loads images, adds events, and draws the canvas for the first time.
    */
    function prepareCanvas()
    {
    	// Create the canvas (Neccessary for IE because it doesn't know what a canvas element is)
    	var canvasDiv = document.getElementById('canvasDiv');
    	canvas = document.createElement('canvas');
    	canvas.setAttribute('width', canvasWidth);
    	canvas.setAttribute('height', canvasHeight);
    	canvas.setAttribute('id', 'canvas');
    	canvasDiv.appendChild(canvas);
    	if(typeof G_vmlCanvasManager != 'undefined') {
    		canvas = G_vmlCanvasManager.initElement(canvas);
    	}
    	
    
    	context = canvas.getContext("2d"); // Grab the 2d canvas context
    	// Note: The above code is a workaround for IE 8 and lower. Otherwise we could have used:
    	//     context = document.getElementById('canvas').getContext("2d");
    	
    	// Load images
    	// -----------
    
    
    
    	// Add mouse events
    	// ----------------
    	$('#canvas').mousedown(function onTouchStart(e)
    	{
    		// Mouse down location
    		var mouseX = e.pageX ; 
    		var mouseY = e.pageY ;
    		
    		
    		if(mouseX < drawingAreaX) // Left of the drawing area
    		{
    			if(mouseX > mediumStartX)
    			{
    				if(mouseY > mediumStartY && mouseY < mediumStartY * 2){
    					curColor = colorVert;
    				}else if(mouseY > mediumStartY * 2 && mouseY < mediumStartY * 3){
    					curColor = colorJaune;
    				}else if(mouseY > mediumStartY  * 3 && mouseY < mediumStartY * 4){
    					curColor = colorOrange;
    				}else if(mouseY > mediumStartY  * 4 && mouseY < mediumStartY * 5){
    					curColor = colorRose;
    				}else if(mouseY > mediumStartY  * 5 && mouseY < mediumStartY * 6){
    					curColor = colorMauve;
    				}else if(mouseY > mediumStartY  * 6 && mouseY < mediumStartY * 7){
    					curColor = colorBleuClair;
    				}else if(mouseY > mediumStartY  * 7 && mouseY < mediumStartY * 8){
    					curColor = colorBrun;
    				}else if(mouseY > mediumStartY  * 8 && mouseY < mediumStartY * 9){
    					curColor = colorBlanc;
    				}
    			}
    			if(mouseX > mediumStartX + mediumImageWidth)
    			{
    				if(mouseY > mediumStartY && mouseY < mediumStartY * 2){
    					curColor = colorVertFonce;
    				}else if(mouseY > mediumStartY * 2 && mouseY < mediumStartY * 3){
    					curColor = colorOrange;
    				}else if(mouseY > mediumStartY  * 3 && mouseY < mediumStartY * 4){
    					curColor = colorRouge;
    				}else if(mouseY > mediumStartY  * 4 && mouseY < mediumStartY * 5){
    					curColor = colorRoseFonce;
    				}else if(mouseY > mediumStartY  * 5 && mouseY < mediumStartY * 6){
    					curColor = colorMauveFonce;
    				}else if(mouseY > mediumStartY  * 6 && mouseY < mediumStartY * 7){
    					curColor = colorBleuFonce;
    				}else if(mouseY > mediumStartY  * 7 && mouseY < mediumStartY * 8){
    					curColor = colorGris;
    				}else if(mouseY > mediumStartY  * 8 && mouseY < mediumStartY * 9){
    					curColor = colorNoir;
    				}
    			}
    		}
    		else if(mouseX > drawingAreaX + drawingAreaWidth) // Right of the drawing area
    		{
    		
    					if(mouseY > EcartGommeY + GommeHeight + EcartPinceauY && mouseY < EcartGommeY + GommeHeight + EcartPinceauY + PinceauHeight && mouseX > drawingAreaX + drawingAreaWidth + EcartPinceauX && mouseX < drawingAreaX + drawingAreaWidth + EcartPinceauX + PinceauWidth ){
    						curTool = "crayon";
    					}else if(mouseY > EcartGommeY  &&  mouseY < EcartGommeY + GommeHeight && mouseX > drawingAreaX + drawingAreaWidth + EcartGommeX && mouseX < drawingAreaX + drawingAreaWidth + EcartGommeX + GommeWidth ){
    						curTool = "eraser";
    					}else if( mouseY > EcartGommeY + GommeHeight + EcartPinceauY + PinceauHeight + EcartTailleHuge && mouseY < EcartGommeY + GommeHeight + EcartPinceauY + PinceauHeight + EcartTailleHuge + HugeHeightWidth && mouseX > drawingAreaX + drawingAreaWidth + EcartHugeX && mouseX < drawingAreaX + drawingAreaWidth + EcartHugeX + HugeHeightWidth ){
    						curSize = "huge";
    					}else if( mouseY > EcartGommeY + GommeHeight + EcartPinceauY + PinceauHeight + EcartTailleHuge + HugeHeightWidth + EcartTailleLarge && mouseY < EcartGommeY + GommeHeight + EcartPinceauY + PinceauHeight + EcartTailleHuge + HugeHeightWidth + EcartTailleLarge + LargeHeightWidth && mouseX > drawingAreaX + drawingAreaWidth + EcartLargeX && mouseX < drawingAreaX + drawingAreaWidth + EcartLargeX + LargeHeightWidth ){
    						curSize = "large";
    					}else if( mouseY > EcartGommeY + GommeHeight + EcartPinceauY + PinceauHeight + EcartTailleHuge + HugeHeightWidth + EcartTailleLarge + LargeHeightWidth + EcartTailleNormal && mouseY < EcartGommeY + GommeHeight + EcartPinceauY + PinceauHeight + EcartTailleHuge + HugeHeightWidth + EcartTailleLarge + LargeHeightWidth + EcartTailleNormal + NormalHeightWidth && mouseX > drawingAreaX + drawingAreaWidth + EcartNormalX && mouseX < drawingAreaX + drawingAreaWidth + EcartNormalX + NormalHeightWidth ){
    						curSize = "normal";
    					}else if( mouseY > EcartGommeY + GommeHeight + EcartPinceauY + PinceauHeight + EcartTailleHuge + HugeHeightWidth + EcartTailleLarge + LargeHeightWidth + EcartTailleNormal + NormalHeightWidth + EcartTailleSmall && mouseY < EcartGommeY + GommeHeight + EcartPinceauY + PinceauHeight + EcartTailleHuge + HugeHeightWidth + EcartTailleLarge + LargeHeightWidth + EcartTailleNormal + NormalHeightWidth + EcartTailleSmall + SmallHeightWidth && mouseX > drawingAreaX + drawingAreaWidth + EcartSmallX && mouseX < drawingAreaX + drawingAreaWidth + EcartSmallX + SmallHeightWidth ){
    						curSize = "small";
    					}
    				
    		}
    
    
    		paint = true;
    		addClick(mouseX, mouseY, false);
    		redraw();
    	});
    	
    	$('#canvas').mousemove(function onTouchMove(e){
    		if(paint==true){
    			addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
    			redraw();
    		}
    	});
    	
    	$('#canvas').mouseup(function onTouchEnd(e){
    		paint = false;
    	  	redraw();
    	});
    	
    	/**$('#canvas').mouseleave(function test01(e){
    		paint = false;
    	});**/
    }
    
    /**
    * Adds a point to the drawing array.
    * @param x
    * @param y
    * @param dragging
    */
    function addClick(x, y, dragging)
    {
    	clickX.push(x);
    	clickY.push(y);
    	clickTool.push(curTool);
    	clickColor.push(curColor);
    	clickSize.push(curSize);
    	clickDrag.push(dragging);
    }
    
    /**
    * Clears the canvas.
    */
    function clearCanvas()
    {
    	context.fillStyle = '#ffffff'; // Work around for Chrome
    	context.fillRect(0, 0, canvasWidth, canvasHeight); // Fill in the canvas with white
    	canvas.width = canvas.width; // clears the canvas 
    }
    
    /**
    * Redraws the canvas.
    */
    function redraw()
    {
    	// Make sure required resources are loaded before redrawing
    	if(curLoadResNum < totalLoadResources){ return; }
    	
    	clearCanvas();
    	
    	var locX;
    	var locY;
    	
    	if(curTool == "crayon")
    	{
    	
    	}
    	
    else if(curTool == "eraser")
    	
    	{
    	
    
    	}
    	
    	
    	// Keep the drawing in the drawing area
    	context.save();
    	context.rect(drawingAreaX, drawingAreaY, drawingAreaWidth, drawingAreaHeight);
    	context.clip();
    		
    	var radius;
    	var i = 0;
    	for(; i < clickX.length; i++)
    	{		
    		if(clickSize[i] == "small"){
    			radius = 2;
    		}else if(clickSize[i] == "normal"){
    			radius = 5;
    		}else if(clickSize[i] == "large"){
    			radius = 10;
    		}else if(clickSize[i] == "huge"){
    			radius = 20;
    		}else{
    			alert("Error: Radius is zero for click " + i);
    			radius = 0;	
    		}
    		
    		
    		context.beginPath();
    		if(clickDrag[i] && i){
    			context.moveTo(clickX[i-1], clickY[i-1]);
    		}else{
    			context.moveTo(clickX[i], clickY[i]);
    		}
    		context.lineTo(clickX[i], clickY[i]);
    		context.stroke();
    		context.closePath();
    		
    		if(clickTool[i] == "eraser"){
    			//context.globalCompositeOperation = "destination-out"; // To erase instead of draw over with white
    			context.strokeStyle = 'white';
    		}else{
    			//context.globalCompositeOperation = "source-over";	// To erase instead of draw over with white
    			context.strokeStyle = clickColor[i];
    		}
    		context.lineJoin = "round";
    		context.lineWidth = radius;
    		
    		
    	}
    
    	
    	// Draw the outline image
    	context.drawImage(outlineImage, drawingAreaX, drawingAreaY, drawingAreaWidth, drawingAreaHeight);
    }
    
    
    /**/
     

Share This Page