API tools faq
paste
Thunder-Menu

Paint_Canvas.html

Thunder-Menu
Oct 31st, 2023 (edited)
533
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 22.05 KB | Source Code | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="fr">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Paint personnalisé</title>
  7.     <style>
  8.         #drawingCanvas {
  9.             border: 1px solid black;
  10.             touch-action: none;
  11.             position: relative;
  12.             z-index: 1;
  13.             background-color: rgba(0,0,0,0); /* Transparency added */
  14.         }
  15.         .controls {
  16.             margin-bottom: 10px;
  17.             position: sticky;
  18.             top: 0;
  19.             background: #ffffff;
  20.             z-index: 10;
  21.             padding: 5px;
  22.         }
  23.         #textVisual {
  24.             position: absolute;
  25.             z-index: 2;
  26.             display: none;
  27.             cursor: pointer;
  28.             background-color: rgba(255,255,255,0.7);
  29.             border: 1px dashed black;
  30.             padding: 3px;
  31.         }
  32.     </style>
  33. </head>
  34. <body>
  35. <h1 id="paint">Paint</h1>
  36. <div class="controls">
  37.         Forme: <select id="shapeSelector">
  38.         <option value="brush">Pinceau</option>
  39.         <option value="line">Ligne</option>
  40.         <option value="rectangle">Rectangle</option>
  41.         <option value="circle">Cercle</option>
  42.         <option value="triangle">Triangle</option>
  43.         <option value="text">Texte</option>
  44.         <option value="eraser">Gomme</option>
  45.         <option value="eyedropper">Compte-goutte</option>
  46.         <option value="fill">Remplissage</option>
  47.     </select>
  48.     <input type="checkbox" id="square"> Square
  49.     Taille: <input type="range" id="size" min="1" max="50" value="5">
  50.     Couleur: <input type="color" id="colorPicker" value="#000000">
  51.     Texte: <input type="text" id="drawText">
  52.     Style de texte: <select id="textStyle">
  53.         <option value="normal">Normal</option>
  54.         <option value="italic">Italique</option>
  55.         <option value="bold">Gras</option>
  56.     </select>
  57.     Police de texte: <select id="fontSelector">
  58.         <option value="Arial">Arial</option>
  59.         <option value="Verdana">Verdana</option>
  60.         <option value="Times New Roman">Times New Roman</option>
  61.         <option value="Pristina">Pristina</option>
  62.     </select>
  63.     Position X: <input type="range" id="textPositionX" min="0" max="100" value="50">
  64.     Position Y: <input type="range" id="textPositionY" min="0" max="100" value="50">
  65. <div id="textPreview"></div>
  66.     <button onclick="placeText()">Placer le texte</button>
  67.     <input type="checkbox" id="lastPoint"> À partir du dernier point
  68.     <button onclick="saveCanvas()">Enregistrer</button>
  69.     <button onclick="document.getElementById('fileLoader').click();">Charger</button>
  70.     <input type="file" id="fileLoader" style="display: none;" onchange="loadImage(event)">
  71.     <button onclick="resetCanvas()">Réinitialiser</button>
  72.     <button onclick="undo()">Effacer le dernier objet</button>
  73.     //<input type="range" id="zoomSlider" min="10" max="200" value="100" onchange="adjustZoom()"> % Zoom
  74. <!-- Zoom horizontal -->
  75. <label for="zoomHorizontal">Zoom Horizontal:</label>
  76. <input type="range" id="zoomHorizontal" min="10" max="200" value="100" onchange="adjustZoomHorizontal()">
  77. <span id="zoomHorizontalValue">100%</span>
  78.  
  79. <!-- Zoom vertical -->
  80. <label for="zoomVertical">Zoom Vertical:</label>
  81. <input type="range" id="zoomVertical" min="10" max="200" value="100" onchange="adjustZoomVertical()">
  82. <span id="zoomVerticalValue">100%</span>
  83.  
  84. </div>
  85. <canvas id="drawingCanvas" width="800" height="600"></canvas>
  86. <div id="textVisual"></div>
  87. <script>
  88. let canvas = document.getElementById('drawingCanvas');
  89. let ctx = canvas.getContext('2d');
  90. let isDrawing = false;
  91. let startPoint = {};
  92. let lastPoint = null;
  93. let square = null;
  94. let shape = "brush";
  95. let currentSize = 5;
  96. let tempCanvas = document.createElement('canvas');
  97. tempCanvas.width = canvas.width;
  98. tempCanvas.height = canvas.height;
  99. let tempCtx = tempCanvas.getContext('2d');
  100. let history = [];
  101. let historyIndex = -1;
  102.  
  103. function getAdjustedMousePos(e) {
  104.     const rect = canvas.getBoundingClientRect();
  105.     return {
  106.         x: (e.clientX - rect.left) * (canvas.width / rect.width),
  107.         y: (e.clientY - rect.top) * (canvas.height / rect.height)
  108.     };
  109. }
  110.  
  111. function saveToHistory() {
  112.     historyIndex++;
  113.     history[historyIndex] = tempCtx.getImageData(0, 0, canvas.width, canvas.height);
  114.     if (historyIndex < history.length - 1) {
  115.        history.length = historyIndex + 1;
  116.    }
  117. }
  118.  
  119. canvas.addEventListener('mousedown', (e) => {
  120.     saveToHistory();
  121.     isDrawing = true;
  122.     if (document.getElementById('lastPoint').checked && lastPoint) {
  123.        startPoint = lastPoint;
  124.     } else {
  125.         startPoint = getAdjustedMousePos(e);
  126.     }
  127. });
  128.  
  129. canvas.addEventListener('mousemove', draw);
  130. canvas.addEventListener('mouseup', (e) => {
  131.     isDrawing = false;
  132.     draw(e);
  133.     lastPoint = getAdjustedMousePos(e);
  134.     finalizeDrawing();
  135. });
  136.  
  137. document.getElementById('shapeSelector').addEventListener('change', (e) => {
  138.     shape = e.target.value;
  139. });
  140.  
  141. document.getElementById('size').addEventListener('change', (e) => {
  142.     currentSize = e.target.value;
  143. });
  144.  
  145. /*function adjustZoom() {
  146.     let zoomValue = document.getElementById('zoomSlider').value;
  147.     canvas.style.transform = `scale(${zoomValue / 100})`;
  148.     canvas.style.transformOrigin = 'top left';
  149. }*/
  150. function adjustZoomHorizontal() {
  151.     let zoomValue = document.getElementById('zoomHorizontal').value;
  152.     canvas.style.transform = `scaleX(${zoomValue / 100})`;
  153.     document.getElementById('zoomHorizontalValue').innerText = `${zoomValue}%`;
  154. }
  155.  
  156. function adjustZoomVertical() {
  157.     let zoomValue = document.getElementById('zoomVertical').value;
  158.     canvas.style.transform = `scaleY(${zoomValue / 100})`;
  159.     document.getElementById('zoomVerticalValue').innerText = `${zoomValue}%`;
  160. }
  161.  
  162.  
  163.  
  164. // Créez un autre canvas pour contenir le texte
  165. let textCanvas = document.createElement('canvas');
  166. textCanvas.width = canvas.width;
  167. textCanvas.height = canvas.height;
  168. let textCtx = textCanvas.getContext('2d');
  169.  
  170. function placeText() {
  171.     let fontValue = document.getElementById('fontSelector').value;
  172.     let fontStyle = document.getElementById('textStyle').value;
  173.     let textContent = document.getElementById('drawText').value;
  174.     let posX = document.getElementById('textPositionX').value / 100 * canvas.width;
  175.     let posY = document.getElementById('textPositionY').value / 100 * canvas.height;
  176.  
  177.     // Effacez la zone où se trouve le texte en dessinant un rectangle transparent
  178.     //ctx.clearRect(posX, posY - currentSize * 3, textCanvas.width, currentSize * 3);
  179.  
  180.     // Dessinez le texte sur le canvas principal
  181.     if (textContent.trim() !== '') {
  182.         ctx.font = `${fontStyle} ${currentSize * 3}px ${fontValue}`;
  183.         ctx.fillStyle = document.getElementById('colorPicker').value;
  184.         ctx.fillText(textContent, posX, posY);
  185.     }
  186.  
  187.     finalizeDrawing(); // Redessine tempCanvas et conserve l'historique
  188.  
  189.     // Effacez la prévisualisation du texte
  190.     document.getElementById('textPreview').textContent = '';
  191. }
  192.  
  193.     let textVisual = document.getElementById('textVisual');
  194.     textVisual.addEventListener('mousedown', startTextDrag);
  195.     textVisual.addEventListener('mousemove', doTextDrag);
  196.     textVisual.addEventListener('mouseup', stopTextDrag);
  197.     textVisual.addEventListener('touchstart', startTextDrag);
  198.     textVisual.addEventListener('touchmove', doTextDrag);
  199.     textVisual.addEventListener('touchend', stopTextDrag);
  200.  
  201.     function startTextDrag(e) {
  202.         if (shape === 'text') {
  203.             e.preventDefault();
  204.             isDrawing = true;
  205.             textVisual.style.display = 'block';
  206.             let textContent = document.getElementById('drawText').value;
  207.             textVisual.innerText = textContent;
  208.             let posX, posY;
  209.  
  210.             if (e.type === 'touchstart') {
  211.                 posX = e.touches[0].clientX;
  212.                 posY = e.touches[0].clientY;
  213.             } else {
  214.                 posX = e.clientX;
  215.                 posY = e.clientY;
  216.             }
  217.  
  218.             textVisual.style.left = `${posX}px`;
  219.             textVisual.style.top = `${posY}px`;
  220.         }
  221.     }
  222.  
  223.     function doTextDrag(e) {
  224.         if (isDrawing && shape === 'text') {
  225.            e.preventDefault();
  226.             let posX, posY;
  227.            
  228.             if (e.type === 'touchmove') {
  229.                 posX = e.touches[0].clientX;
  230.                 posY = e.touches[0].clientY;
  231.             } else {
  232.                 posX = e.clientX;
  233.                 posY = e.clientY;
  234.             }
  235.  
  236.             textVisual.style.left = `${posX}px`;
  237.             textVisual.style.top = `${posY}px`;
  238.         }
  239.     }
  240.  
  241. function stopTextDrag(e) {
  242.     if (isDrawing && shape === 'text') {
  243.        isDrawing = false;
  244.         let posX, posY;
  245.  
  246.         if (e.type === 'touchend') {
  247.             let touch = e.changedTouches[0];
  248.             posX = touch.clientX;
  249.             posY = touch.clientY;
  250.         } else {
  251.             posX = e.clientX;
  252.             posY = e.clientY;
  253.         }
  254.  
  255.         const canvasRect = canvas.getBoundingClientRect();
  256.         const canvasX = posX - canvasRect.left;
  257.         const canvasY = posY - canvasRect.top;
  258.        
  259.         // Mise à jour des valeurs textPositionX et textPositionY en pourcentage
  260.         document.getElementById('textPositionX').value = (canvasX / canvasRect.width) * 100;
  261.         document.getElementById('textPositionY').value = (canvasY / canvasRect.height) * 100;
  262.  
  263.         placeText();
  264.         textVisual.style.display = 'none';
  265.     }
  266. }
  267.  
  268.    
  269.         document.getElementById('shapeSelector').addEventListener('change', (e) => {
  270.             shape = e.target.value;
  271.             switch (shape) {
  272.                 case "brush":
  273.                 case "line":
  274.                 case "circle":
  275.                 case "rectangle":
  276.                 case "triangle":
  277.                 case "fill":
  278.                     canvas.style.cursor = progress;
  279. //"url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KPHBhdGggZD0iTTEwLDEuNWMtNC42LDAuMS04LjMsMy44LTksOC42QzEsMTEsMiwxMiwyLDEyLjNjMC41LDAuOSwyLjIsMi43LDQsMy45YzEuOCwxLjEsMy43LDEuOSw1LjUsMS45YzIuMiwwLDQuMi0xLDEtNEw3LDEwTDExLDVsMi4zLDNjMi43LTIuNiwyLjMtNi43LDEuMi05LjJDMTQuMiwyLjIsMTIsMS42LDEwLDEuNXoiIGZpbGw9IiMwMDAwMDAiLz4KPC9zdmc+Cg==') 10 10, auto";
  280.                     break;
  281.                 case "text":
  282.                     canvas.style.cursor = "text";
  283.                     break;
  284.                 case "eraser":
  285.                     canvas.style.cursor = "pointer";
  286.                     break;
  287.                 case "eyedropper":
  288.                     canvas.style.cursor = crosshair;
  289. //"url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KPHBhdGggZD0iTTE2LjIsNC4ybC0xLjQtMS40Yy0wLjQtMC40LTEtMC40LTEuNCwwTDEuMiwxNC4yYy0wLjQsMC40LTAuNCwxLDAsMS40bDEuNCwxLjRjMC40LDAuNCwxLDAuNCwxLjQsMEwxNi4yLDUuNkMxNi42LDUuMiwxNi42LDQuNiwxNi4yLDQuMnoiIGZpbGw9IiMwMDAwMDAiLz4KPC9zdmc+Cg==') 10 10, auto";
  290.  
  291.                     break;
  292.             }
  293.         });
  294. function lerp(point1, point2, t) {
  295.     return {
  296.         x: point1.x + t * (point2.x - point1.x),
  297.         y: point1.y + t * (point2.y - point1.y)
  298.     };
  299. }
  300.  
  301.     function draw(e) {
  302.     if (!isDrawing) return;
  303.     const currentPoint = getAdjustedMousePos(e);
  304.     ctx.strokeStyle = document.getElementById('colorPicker').value;
  305.     ctx.lineWidth = currentSize;
  306.     let currentCtx = ctx; // par défaut, on dessine sur le canvas principal
  307.  
  308.     switch (shape) {
  309. case "brush":
  310.     if (document.getElementById('square').checked) {
  311.         if (document.getElementById('lastPoint').checked && lastPoint) {
  312.            ctx.lineTo(currentPoint.x, currentPoint.y);
  313.  ctx.stroke();
  314.             ctx.beginPath();
  315.             const halfLineWidth = ctx.lineWidth / 2;
  316.             ctx.fillStyle = document.getElementById('colorPicker').value; // Définir la couleur de remplissage
  317.             ctx.fillRect(currentPoint.x - halfLineWidth, currentPoint.y - halfLineWidth, ctx.lineWidth, ctx.lineWidth);
  318.             ctx.fill();
  319.             ctx.moveTo(currentPoint.x, currentPoint.y);
  320.         } else {
  321.             const distance = Math.sqrt((currentPoint.x - startPoint.x)**2 + (currentPoint.y - startPoint.y)**2);
  322.             const step = ctx.lineWidth;
  323.             const steps = Math.ceil(distance / step);
  324.             const dx = (currentPoint.x - startPoint.x) / steps;
  325.             const dy = (currentPoint.y - startPoint.y) / steps;
  326.             for (let i = 0; i < steps; i++) {
  327.                const x = startPoint.x + dx * i;
  328.                const y = startPoint.y + dy * i;
  329.                ctx.beginPath();
  330.                const halfStep = step / 2;
  331.            ctx.fillStyle = document.getElementById('colorPicker').value; // Définir la couleur de remplissage
  332.                ctx.fillRect(x - halfStep, y - halfStep, step, step);
  333.                ctx.fill();
  334.            }
  335.        }
  336.        startPoint = currentPoint;
  337. ctx.stroke();
  338.        break;
  339.    } else {
  340.        if (document.getElementById('lastPoint').checked && lastPoint) {
  341.            ctx.lineTo(currentPoint.x, currentPoint.y);
  342.            ctx.beginPath();
  343.            ctx.arc(currentPoint.x, currentPoint.y, ctx.lineWidth / 2, 0, Math.PI * 2, false);
  344.            ctx.fill();
  345.            ctx.moveTo(currentPoint.x, currentPoint.y);
  346.            ctx.stroke();
  347.        } else {
  348.            const distance = Math.sqrt((currentPoint.x - startPoint.x)**2 + (currentPoint.y - startPoint.y)**2);
  349.            const radius = ctx.lineWidth / 2;
  350.            const step = ctx.lineWidth;
  351.            const steps = Math.ceil(distance / step);
  352.            const dx = (currentPoint.x - startPoint.x) / steps;
  353.            const dy = (currentPoint.y - startPoint.y) / steps;
  354.  
  355.            for (let i = 0; i < steps; i++) {
  356.                const x = startPoint.x + dx * i;
  357.                const y = startPoint.y + dy * i;
  358.                ctx.beginPath();
  359.                ctx.arc(x, y, radius, 0, Math.PI * 2, false);
  360.                ctx.fill();
  361. ctx.stroke();
  362.            }
  363.        }
  364.        startPoint = currentPoint;
  365.        break;
  366.    }
  367.  
  368.        case "eraser":
  369.            ctx.clearRect(currentPoint.x - currentSize / 2, currentPoint.y - currentSize / 2, currentSize, currentSize);
  370.            break;
  371.  
  372.        case "line":
  373.        case "rectangle":
  374.        case "circle":
  375.        case "triangle":
  376.  
  377.            switch (shape) {
  378.  
  379.                case "line":
  380.            ctx.clearRect(0, 0, canvas.width, canvas.height);
  381.            ctx.drawImage(tempCanvas, 0, 0);
  382.                    ctx.beginPath();
  383.                    ctx.moveTo(startPoint.x, startPoint.y);
  384.                    ctx.lineTo(currentPoint.x, currentPoint.y);
  385.                    ctx.stroke();
  386.                    break;
  387.                case "rectangle":
  388.            ctx.clearRect(0, 0, canvas.width, canvas.height);
  389.            ctx.drawImage(tempCanvas, 0, 0);
  390.                    let rectWidth = currentPoint.x - startPoint.x;
  391.                    let rectHeight = currentPoint.y - startPoint.y;
  392.                    ctx.strokeRect(startPoint.x, startPoint.y, rectWidth, rectHeight);
  393.                    break;
  394.                case "circle":
  395.            ctx.clearRect(0, 0, canvas.width, canvas.height);
  396.            ctx.drawImage(tempCanvas, 0, 0);
  397.                    ctx.beginPath();
  398.                    let radius = Math.sqrt(Math.pow(currentPoint.x - startPoint.x, 2) + Math.pow(currentPoint.y - startPoint.y, 2));
  399.                    ctx.arc(startPoint.x, startPoint.y, radius, 0, Math.PI * 2);
  400.                    ctx.stroke();
  401.                    break;
  402.                case "triangle":
  403.            ctx.clearRect(0, 0, canvas.width, canvas.height);
  404.            ctx.drawImage(tempCanvas, 0, 0);
  405.                    ctx.beginPath();
  406.                    ctx.moveTo(startPoint.x, startPoint.y);
  407.                    ctx.lineTo(startPoint.x + (currentPoint.x - startPoint.x), currentPoint.y);
  408.                    ctx.lineTo(startPoint.x - (currentPoint.x - startPoint.x), currentPoint.y);
  409.                    ctx.closePath();
  410.                    ctx.stroke();
  411.                    break;
  412.            }
  413.            break;
  414.    }
  415. }
  416. canvas.addEventListener('click', (e) => {
  417.     const rect = canvas.getBoundingClientRect();
  418.     const x = Math.round(e.clientX - rect.left);
  419.     const y = Math.round(e.clientY - rect.top);
  420.    
  421.     switch (shape) {
  422.        case "fill":
  423.             const fillColor = hexToRgb(document.getElementById('colorPicker').value);
  424.             const targetColor = ctx.getImageData(x, y, 1, 1).data.slice(0, 3);  // Prendre seulement r, g, b
  425.             floodFill(x, y, fillColor);
  426.             console.log("Outil de remplissage activé");
  427.             break;
  428.     }
  429. });
  430. canvas.addEventListener('click', (e) => {
  431.     const rect = canvas.getBoundingClientRect();
  432.     const x = Math.round(e.clientX - rect.left);
  433.     const y = Math.round(e.clientY - rect.top);
  434.    
  435.     switch (shape) {
  436. case "eyedropper":
  437.     const x = e.clientX - canvas.getBoundingClientRect().left;
  438.     const y = e.clientY - canvas.getBoundingClientRect().top;
  439.     const imageData = ctx.getImageData(x, y, 1, 1);
  440.     const [r, g, b, a] = imageData.data;
  441.  
  442.     if (a !== 0) {  // Ignorer les pixels transparents
  443.         const selectedColor = `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
  444.        
  445.         // Mettre à jour la valeur du color picker
  446.         document.getElementById('colorPicker').value = selectedColor;
  447.        
  448.         // Mettre à jour la couleur de remplissage du contexte
  449.         ctx.fillStyle = selectedColor;
  450.        
  451.         console.log("Couleur sélectionnée:", selectedColor);
  452.     }
  453.     break;
  454.     }
  455. });
  456.  
  457.  
  458. function colorsMatch(a, b) {
  459.     return a[0] === b[0] && a[1] === b[1] && a[2] === b[2];
  460. }
  461.  
  462.  
  463. function hexToRgb(hex) {
  464.     const bigint = parseInt(hex.slice(1), 16);
  465.     const r = (bigint >> 16) & 255;
  466.     const g = (bigint >> 8) & 255;
  467.     const b = bigint & 255;
  468.  
  469.     return [r, g, b];
  470. }
  471.  
  472. function floodFill(startX, startY, fillColor) {
  473.     const targetColor = ctx.getImageData(startX, startY, 1, 1).data;
  474.     const pixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
  475.     const stack = [[startX, startY]];
  476.  
  477.     function matchTargetColor(pixelPos) {
  478.         const r = pixels.data[pixelPos];
  479.         const g = pixels.data[pixelPos + 1];
  480.         const b = pixels.data[pixelPos + 2];
  481.         const a = pixels.data[pixelPos + 3];
  482.  
  483.         return (r === targetColor[0] && g === targetColor[1] && b === targetColor[2] && a === targetColor[3]);
  484.     }
  485.  
  486.     while (stack.length) {
  487.         const [x, y] = stack.pop();
  488.         if (x >= 0 && x < canvas.width && y >= 0 && y < canvas.height) {
  489.            const pixelPos = (y * canvas.width + x) * 4;
  490.             if (matchTargetColor(pixelPos)) {
  491.                 pixels.data[pixelPos] = fillColor[0];
  492.                 pixels.data[pixelPos + 1] = fillColor[1];
  493.                 pixels.data[pixelPos + 2] = fillColor[2];
  494.                 pixels.data[pixelPos + 3] = 255;  // Assuming full opacity
  495.  
  496.                 stack.push([x + 1, y]);
  497.                 stack.push([x - 1, y]);
  498.                 stack.push([x, y + 1]);
  499.                 stack.push([x, y - 1]);
  500.             }
  501.         }
  502.     }
  503.     ctx.putImageData(pixels, 0, 0);
  504. }
  505.  
  506.  
  507. function saveCanvas() {
  508.     let dataURL = canvas.toDataURL('image/png');
  509.     let link = document.createElement('a');
  510.     link.href = dataURL;
  511.     link.download = 'canvas.png';
  512.     link.click();
  513. }
  514.  
  515. function loadImage(event) {
  516.     let file = event.target.files[0];
  517.     if (file) {
  518.         let reader = new FileReader();
  519.         reader.onload = function(event) {
  520.             let img = new Image();
  521.             img.onload = function() {
  522.                 // Mettez à jour les dimensions du canvas
  523.                 canvas.width = img.width;
  524.                 canvas.height = img.height;
  525.                 ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
  526.                 finalizeDrawing();
  527.             }
  528.             img.src = event.target.result;
  529.         }
  530.         reader.readAsDataURL(file);
  531.     }
  532. }
  533.  
  534.  
  535. function resetCanvas() {
  536.     saveToHistory();
  537.     ctx.clearRect(0, 0, canvas.width, canvas.height);
  538.     tempCtx.clearRect(0, 0, canvas.width, canvas.height);
  539. }
  540.  
  541. function undo() {
  542.     if (historyIndex > 0) {
  543.         historyIndex--;
  544.         tempCtx.putImageData(history[historyIndex], 0, 0);
  545.         ctx.clearRect(0, 0, canvas.width, canvas.height);
  546.         ctx.drawImage(tempCanvas, 0, 0);
  547.     }
  548. }
  549.  
  550. function finalizeDrawing() {
  551.     tempCtx.clearRect(0, 0, canvas.width, canvas.height);
  552.     tempCtx.drawImage(canvas, 0, 0);
  553. }
  554.  
  555. canvas.addEventListener('touchstart', (e) => {
  556.     saveToHistory();
  557.     isDrawing = true;
  558.     e.preventDefault();
  559.     let touch = e.touches[0];
  560.     if (document.getElementById('lastPoint').checked && lastPoint) {
  561.        startPoint = lastPoint;
  562.     } else {
  563.         startPoint = getAdjustedMousePos(touch);
  564.     }
  565. });
  566.  
  567. canvas.addEventListener('touchmove', (e) => {
  568.     e.preventDefault();
  569.     draw(e.touches[0]);
  570. });
  571.  
  572. canvas.addEventListener('touchend', (e) => {
  573.     isDrawing = false;
  574.     let touch = e.changedTouches[0];
  575.     draw(touch);
  576.     lastPoint = getAdjustedMousePos(touch);
  577.     finalizeDrawing();
  578. });
  579.  
  580. //document.getElementById('drawText').addEventListener('input', placeText);
  581.  
  582.  
  583. window.onload = function() {
  584.     let userAgent = navigator.userAgent || navigator.vendor || window.opera;
  585.     if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
  586.        document.getElementById('paint').innerText = "Paint pour iPhone/iPad/iPod";
  587.     } else if (/android/i.test(userAgent)) {
  588.         document.getElementById('paint').innerText = "Paint pour Android";
  589.     } else if (/Windows/.test(userAgent) && ('ontouchstart' in window || navigator.maxTouchPoints)) {
  590.        document.getElementById('paint').innerText = "Paint pour Windows (Tactile)";
  591.     } else {
  592.         document.getElementById('paint').innerText = "Paint pour autres plateformes";
  593.     }
  594. }
  595.  
  596.  
  597. </script>
  598. </body>
  599. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!