1 // Copyright 2016, 2020 Paul Hänsch
3 // This file is part of Confetti.
5 // Confetti is free software: you can redistribute it and/or modify
6 // it under the terms of the GNU Affero General Public License as published by
7 // the Free Software Foundation, either version 3 of the License, or
8 // (at your option) any later version.
10 // Confetti is distributed in the hope that it will be useful,
11 // but WITHOUT ANY WARRANTY; without even the implied warranty of
12 // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
13 // GNU Affero General Public License for more details.
15 // You should have received a copy of the GNU Affero General Public License
16 // along with Confetti. If not, see <http://www.gnu.org/licenses/>.
19 dbg = document.getElementById("jsdebug")
20 canvas = document.getElementById("canvas")
21 data = document.getElementById("image_serialize")
23 image = canvas.getContext("2d")
26 image.lineJoin = "round"
27 image.lineCap = "round"
28 data.value += " stroke-linejoin round "
29 data.value += " stroke-linecap round "
31 // start and current coordinates of a draw
32 // serves for tracking, whether path ends close to its beginning
36 function setstroke(w) {
38 data.value += " stroke-width " + image.lineWidth
44 data.value += " stroke " + c + "F"
48 if ( body.clientWidth >= 800 ){
49 return Math.floor(cscaleW * (x - canvas.offsetLeft))
51 return Math.floor(cscaleW * (x - canvas.offsetLeft + window.pageXOffset))
55 if ( body.clientWidth >= 800 ){
56 return Math.floor(cscaleH * (y - canvas.offsetTop))
58 return Math.floor(cscaleH * (y - canvas.offsetTop + window.pageYOffset))
64 cux=relX(x), cuy=relY(y)
66 image.lineTo( cux, cuy )
69 image_serialize += " " + cux + "," + cuy
73 function drawstart(x, y) {
76 cscaleW = canvas.width / canvas.clientWidth
77 cscaleH = canvas.height / canvas.clientHeight
79 stx=relX(x), sty=relY(y)
81 setstroke(document.querySelector('input[name="penwidth"]:checked').value);
82 setcol(document.querySelector('input[name="color"]:checked').value);
85 draw(x, y); // why must this not use relative Coords ???
87 image_serialize = " polyline " + stx + "," + sty;
92 // if path ends close to beginning ( < 50 px); then close path and fill
93 if ( mouse == 1 && Math.sqrt( Math.pow(stx - cux, 2) + Math.pow(sty - cuy, 2)) <= 50 && c !== "#FFF" ){
94 image.lineTo( stx, sty )
97 image.globalAlpha = .5
101 image_serialize += " " + stx + "," + sty
102 data.value += " fill " + c + "8" + image_serialize
103 } else if (mouse == 1) {
104 data.value += " fill #0000 " + image_serialize
106 dbg.innerHTML = " stx: " + stx + " cux: " + cux + " sty: " + sty + " cuy: " + cuy
113 window.addEventListener( 'mouseup', function() { drawstop() } )
114 canvas.addEventListener( 'mousedown', function(e) { drawstart(e.clientX, e.clientY) } )
115 canvas.addEventListener( 'mousemove', function(e) { draw(e.clientX, e.clientY) } )
117 window.addEventListener( 'touchend', function() { drawstop() } )
118 canvas.addEventListener( 'touchstart', function(e) { drawstart(e.touches[0].clientX, e.touches[0].clientY) } )
119 canvas.addEventListener( 'touchmove', function(e) { e.preventDefault(); draw(e.touches[0].clientX, e.touches[0].clientY) } )