`; var printWin = window.open('', '', 'width=800,height=600'); printWin.document.open(); printWin.document.write(windowContent); printWin.document.close(); } function resetImage() { _rotate = 0; ctx.globalCompositeOperation = 'source-over'; ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(img1, 0, 0, img1.width, img1.height, x, y, new_w, new_h); } function restartDrawing() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.save(); ctx.restore(); } var _rotate = 0; function saveImage() { var link = document.createElement('a'); link.setAttribute('download', 'barbie-in-bikini.jpg'); link.setAttribute('href', canvas.toDataURL("image/png").replace("image/png", "image/octet-stream")); link.click(); } _erasing = false; function drawRotated(degrees) { ctx.globalCompositeOperation = 'source-over'; ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.save(); ctx.translate(canvas.width / 2, canvas.height / 2); ctx.rotate(degrees * Math.PI / 180); ctx.drawImage(img1, -img1.width / 2, -img1.width / 2); ctx.restore(); } function rgbToHex(col) { if (col.charAt(0) == 'r') { col = col.replace('rgb(', '').replace(')', '').split(','); var r = parseInt(col[0], 10).toString(16); var g = parseInt(col[1], 10).toString(16); var b = parseInt(col[2], 10).toString(16); r = r.length == 1 ? '0' + r : r; g = g.length == 1 ? '0' + g : g; b = b.length == 1 ? '0' + b : b; var colHex = '#' + r + g + b; return colHex; } return col; } var theColor = '#0000ff'; function setColor(c) { _erasing = false; ctx.globalCompositeOperation = 'source-over'; document.getElementById('mycursor').style.backgroundColor = c; c = rgbToHex(c); theColor = c; btns = document.querySelector("button"); for (i = 0; i < btns.length; i++) { if (btns[i].style.backgroundColor == c) { btns[i].className = 'active'; } else { btns[i].className = ''; } } ctx.strokeStyle = hexToRgbA(theColor, 0.5); //ctx.globalAlpha = 1 //ctx.clearRect(0, 0, canvas.width, canvas.height); } function hexToRgbA(hex, v) { var c; if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) { c = hex.substring(1).split(''); if (c.length == 3) { c = [c[0], c[0], c[1], c[1], c[2], c[2]]; } c = '0x' + c.join(''); return 'rgba(' + [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(',') + ',' + v + ')'; } } var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); var painting = document.getElementById('paint'); var paint_style = getComputedStyle(painting); canvas.width = parseInt(paint_style.getPropertyValue('width')); canvas.height = parseInt(paint_style.getPropertyValue('height')); var mouse = { x: 0, y: 0 }; canvas.addEventListener('mousemove', function (e) { mouse.x = e.pageX - this.offsetLeft - 20; mouse.y = e.pageY - this.offsetTop - 20; document.getElementById('mycursor').style.left = mouse.x + 'px'; document.getElementById('mycursor').style.top = mouse.y + 'px'; onPaint(); }, false); canvas.addEventListener('touchmove', function (evt) { var touches = evt.changedTouches; mouse.x = touches[touches.length - 1].pageX - this.offsetLeft; mouse.y = touches[touches.length - 1].pageY - this.offsetTop; w = document.getElementById('mycursor').offsetWidth / 2; document.getElementById('mycursor').style.left = mouse.x - w + 'px'; document.getElementById('mycursor').style.top = mouse.y - w + 'px'; onPaint(); }, false); ctx.lineWidth = document.getElementById('brush_size').value; ctx.lineJoin = 'round'; ctx.lineCap = 'round'; var _lastcolor; var _doPainting = false; var _points = []; canvas.addEventListener('mousedown', function (e) { if(!_erasing){ saveState(); } _points = [] h = hexToRgbA(theColor, 0.3); //ctx.globalAlpha = "0.1"; x = document.getElementById('mycursor').style.left.split('px')[0] * 1 + document.getElementById('mycursor').style.width.split('px')[0] * 1 / 2; y = document.getElementById('mycursor').style.top.split('px')[0] * 1 + document.getElementById('mycursor').style.width.split('px')[0] * 1 / 2; ctx.beginPath(); ctx.moveTo(x, y); //ctx.strokeStyle = hexToRgbA(theColor, 0.5); //ctx.stroke(); ctx.lineWidth = document.getElementById('brush_size').value; if (h != _lastcolor) { window.console.log('update kleur'); _lastcolor = h; } _lastPosX = x; _lastPosY = y; _doPainting = true; }, false); canvas.addEventListener('touchstart', function (evt) { if(!_erasing){ saveState(); } _points = [] var touches = evt.changedTouches; ctx.beginPath(); ctx.stroke(); _doPainting = true; document.getElementById('mycursor').style.left = evt.touches[0].pageX + 'px'; document.getElementById('mycursor').style.top = evt.touches[0].pageY + 'px'; x = document.getElementById('mycursor').style.left.split('px')[0] * 1 + document.getElementById('mycursor').style.width.split('px')[0] * 1 / 2; y = document.getElementById('mycursor').style.top.split('px')[0] * 1 + document.getElementById('mycursor').style.width.split('px')[0] * 1 / 2; _lastPosX = x; _lastPosY = y; ctx.lineWidth = document.getElementById('brush_size').value; ctx.moveTo(x, y); }); canvas.addEventListener('touchmove', onPaint, false); canvas.addEventListener('mouseup', function () { if(!_erasing){ recoverState().then(function(){ drawFromPoints(); }); } _doPainting = false; ctx.closePath(); }, false); canvas.addEventListener('touchend', function () { if(!_erasing){ recoverState().then(function(){ drawFromPoints(); }); } _doPainting = false; }, false); var _lastPosX = 0; var _lastPosY = 0; var onPaint = function () { if(_doPainting){ x = document.getElementById('mycursor').style.left.split('px')[0] * 1 + document.getElementById('mycursor').style.width.split('px')[0] * 1 / 2; y = document.getElementById('mycursor').style.top.split('px')[0] * 1 + document.getElementById('mycursor').style.width.split('px')[0] * 1 / 2; //w = document.getElementById('mycursor').style.width.split('px')[0]/2; window.console.log(_lastPosX, _lastPosY, x, y); //if (Math.abs(_lastx - x) > 13 && Math.abs(_lasty - y) > 13) { ctx.beginPath(); if(_points.length>1) { //ctx.moveTo(_lastPosX, _lastPosY); ctx.moveTo(_points[_points.length-2].x, _points[_points.length-2].y); ctx.lineTo(_points[_points.length-1].x, _points[_points.length-1].y); } //ctx.beginPath(); ctx.lineTo(x, y); ctx.stroke(); ctx.closePath(); _points[_points.length] = {x: x, y:y}; //ctx.closePath(); _lastx = x; _lasty = y; //} _lastPosX = x; _lastPosY = y; } }; _lastState = ''; function saveState(){ _lastState = document.getElementById('myCanvas').toDataURL() } function recoverState(){ return new Promise(resolve => { var canvasPic = new Image(); canvasPic.src = _lastState; canvasPic.onload = function () { ctx.clearRect(0,0, canvas.width, canvas.height); ctx.drawImage(this, 0, 0); resolve(); } }); } function drawFromPoints(){ ctx.beginPath(); ctx.strokeStyle = hexToRgbA(theColor, 0.5); ctx.lineWidth = document.getElementById('brush_size').value; ctx.moveTo(_points[0].x, _points[0].y); for(i=0; i < _points.length; i++){ ctx.lineTo(_points[i].x, _points[i].y); window.console.log(_points[i].x, _points[i].y);; } //ctx.globalCompositeOperation = 'source-over'; ctx.stroke(); ctx.closePath(); } var _lastx = 0; var _lasty = 0; var img1 = new Image(); img1.src = '/uploads/kleurplaten/barbie-in-bikini.jpg'; // img1.src = 'eekhoorn.jpg'; //drawing of the test image - img1 img1.crossOrigin = 'anonymous'; img1.onload = function () { maxw= window.innerWidth; ratio = maxw / img1.width; //alert(img1.width * ratio); //img1.width = img1.width ; //img1.height = img1.height * ratio ; window.console.log(ctx); //draw background image maxh = window.innerHeight - 120; new_w = img1.width * ratio; new_h = img1.height * ratio; if (new_h > maxh) { ratio = maxh / img1.height; new_w = img1.width * ratio; new_h = img1.height * ratio; } x = (maxw - new_w) / 2; y = (maxh - new_h) / 2 ; //ctx.globalCompositeOperation = 'destination-atop'; ctx.drawImage(this, 0, 0, img1.width, img1.height, x, y, new_w, new_h); //ctx.globalCompositeOperation = 'source-out'; //draw a box over the top };