From f904b2fa7a9ae6e007f84e07545c12daab160666 Mon Sep 17 00:00:00 2001 From: durgeshkaushik <34072223+durgeshkaushik@users.noreply.github.com> Date: Tue, 13 Oct 2020 08:26:02 +0530 Subject: [PATCH 1/4] Update html5-canvas-drawing-app.html --- html5-canvas-drawing-app.html | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/html5-canvas-drawing-app.html b/html5-canvas-drawing-app.html index 5c97a23..5c353ef 100644 --- a/html5-canvas-drawing-app.html +++ b/html5-canvas-drawing-app.html @@ -1,14 +1,14 @@ - - - - Create HTML5 Canvas JavaScript Drawing App Example - - -
- - - - - \ No newline at end of file + + Sorry, your browser doesn't support canvas + + +
+ + + + + + + + +
From f1ea84973829dd114057ed81283cb8b6ae4cfa8a Mon Sep 17 00:00:00 2001 From: durgeshkaushik <34072223+durgeshkaushik@users.noreply.github.com> Date: Tue, 13 Oct 2020 08:26:20 +0530 Subject: [PATCH 2/4] Create main.css --- main.css | 34 ++++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 main.css diff --git a/main.css b/main.css new file mode 100644 index 0000000..3cd671f --- /dev/null +++ b/main.css @@ -0,0 +1,34 @@ +* { + user-select: none; +} + +body { + overflow: hidden; +} + +#c { + margin-left: -8px; + margin-top: -8px; + cursor: crosshair; +} + +.buttons { + width: 100%; + position: absolute; + top: 0; + left: 0; + background: black; + text-align: center; + padding: 0.5em; +} + +button{ + padding: 1em; + display: inline-block; +} + +label{ + color: white; + font-family: sans-serif; + padding: 0.2em; +} From f8e88b9b9e77378a2934c40308ffccef767a215b Mon Sep 17 00:00:00 2001 From: durgeshkaushik <34072223+durgeshkaushik@users.noreply.github.com> Date: Tue, 13 Oct 2020 08:27:14 +0530 Subject: [PATCH 3/4] Update excanvas.js --- excanvas.js | 1055 +++++++-------------------------------------------- 1 file changed, 131 insertions(+), 924 deletions(-) diff --git a/excanvas.js b/excanvas.js index 367764b..d4d0267 100644 --- a/excanvas.js +++ b/excanvas.js @@ -1,924 +1,131 @@ -// Copyright 2006 Google Inc. -// -// 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. - - -// Known Issues: -// -// * Patterns are not implemented. -// * Radial gradient are not implemented. The VML version of these look very -// different from the canvas one. -// * Clipping paths are not implemented. -// * Coordsize. The width and height attribute have higher priority than the -// width and height style values which isn't correct. -// * Painting mode isn't implemented. -// * Canvas width/height should is using content-box by default. IE in -// Quirks mode will draw the canvas using border-box. Either change your -// doctype to HTML5 -// (http://www.whatwg.org/specs/web-apps/current-work/#the-doctype) -// or use Box Sizing Behavior from WebFX -// (http://webfx.eae.net/dhtml/boxsizing/boxsizing.html) -// * Non uniform scaling does not correctly scale strokes. -// * Optimize. There is always room for speed improvements. - -// Only add this code if we do not already have a canvas implementation -if (!document.createElement('canvas').getContext) { - -(function() { - - // alias some functions to make (compiled) code shorter - var m = Math; - var mr = m.round; - var ms = m.sin; - var mc = m.cos; - var abs = m.abs; - var sqrt = m.sqrt; - - // this is used for sub pixel precision - var Z = 10; - var Z2 = Z / 2; - - /** - * This funtion is assigned to the elements as element.getContext(). - * @this {HTMLElement} - * @return {CanvasRenderingContext2D_} - */ - function getContext() { - return this.context_ || - (this.context_ = new CanvasRenderingContext2D_(this)); - } - - var slice = Array.prototype.slice; - - /** - * Binds a function to an object. The returned function will always use the - * passed in {@code obj} as {@code this}. - * - * Example: - * - * g = bind(f, obj, a, b) - * g(c, d) // will do f.call(obj, a, b, c, d) - * - * @param {Function} f The function to bind the object to - * @param {Object} obj The object that should act as this when the function - * is called - * @param {*} var_args Rest arguments that will be used as the initial - * arguments when the function is called - * @return {Function} A new function that has bound this - */ - function bind(f, obj, var_args) { - var a = slice.call(arguments, 2); - return function() { - return f.apply(obj, a.concat(slice.call(arguments))); - }; - } - - var G_vmlCanvasManager_ = { - init: function(opt_doc) { - if (/MSIE/.test(navigator.userAgent) && !window.opera) { - var doc = opt_doc || document; - // Create a dummy element so that IE will allow canvas elements to be - // recognized. - doc.createElement('canvas'); - doc.attachEvent('onreadystatechange', bind(this.init_, this, doc)); - } - }, - - init_: function(doc) { - // create xmlns - if (!doc.namespaces['g_vml_']) { - doc.namespaces.add('g_vml_', 'urn:schemas-microsoft-com:vml', - '#default#VML'); - - } - if (!doc.namespaces['g_o_']) { - doc.namespaces.add('g_o_', 'urn:schemas-microsoft-com:office:office', - '#default#VML'); - } - - // Setup default CSS. Only add one style sheet per document - if (!doc.styleSheets['ex_canvas_']) { - var ss = doc.createStyleSheet(); - ss.owningElement.id = 'ex_canvas_'; - ss.cssText = 'canvas{display:inline-block;overflow:hidden;' + - // default size is 300x150 in Gecko and Opera - 'text-align:left;width:300px;height:150px}' + - 'g_vml_\\:*{behavior:url(#default#VML)}' + - 'g_o_\\:*{behavior:url(#default#VML)}'; - - } - - // find all canvas elements - var els = doc.getElementsByTagName('canvas'); - for (var i = 0; i < els.length; i++) { - this.initElement(els[i]); - } - }, - - /** - * Public initializes a canvas element so that it can be used as canvas - * element from now on. This is called automatically before the page is - * loaded but if you are creating elements using createElement you need to - * make sure this is called on the element. - * @param {HTMLElement} el The canvas element to initialize. - * @return {HTMLElement} the element that was created. - */ - initElement: function(el) { - if (!el.getContext) { - - el.getContext = getContext; - - // Remove fallback content. There is no way to hide text nodes so we - // just remove all childNodes. We could hide all elements and remove - // text nodes but who really cares about the fallback content. - el.innerHTML = ''; - - // do not use inline function because that will leak memory - el.attachEvent('onpropertychange', onPropertyChange); - el.attachEvent('onresize', onResize); - - var attrs = el.attributes; - if (attrs.width && attrs.width.specified) { - // TODO: use runtimeStyle and coordsize - // el.getContext().setWidth_(attrs.width.nodeValue); - el.style.width = attrs.width.nodeValue + 'px'; - } else { - el.width = el.clientWidth; - } - if (attrs.height && attrs.height.specified) { - // TODO: use runtimeStyle and coordsize - // el.getContext().setHeight_(attrs.height.nodeValue); - el.style.height = attrs.height.nodeValue + 'px'; - } else { - el.height = el.clientHeight; - } - //el.getContext().setCoordsize_() - } - return el; - } - }; - - function onPropertyChange(e) { - var el = e.srcElement; - - switch (e.propertyName) { - case 'width': - el.style.width = el.attributes.width.nodeValue + 'px'; - el.getContext().clearRect(); - break; - case 'height': - el.style.height = el.attributes.height.nodeValue + 'px'; - el.getContext().clearRect(); - break; - } - } - - function onResize(e) { - var el = e.srcElement; - if (el.firstChild) { - el.firstChild.style.width = el.clientWidth + 'px'; - el.firstChild.style.height = el.clientHeight + 'px'; - } - } - - G_vmlCanvasManager_.init(); - - // precompute "00" to "FF" - var dec2hex = []; - for (var i = 0; i < 16; i++) { - for (var j = 0; j < 16; j++) { - dec2hex[i * 16 + j] = i.toString(16) + j.toString(16); - } - } - - function createMatrixIdentity() { - return [ - [1, 0, 0], - [0, 1, 0], - [0, 0, 1] - ]; - } - - function matrixMultiply(m1, m2) { - var result = createMatrixIdentity(); - - for (var x = 0; x < 3; x++) { - for (var y = 0; y < 3; y++) { - var sum = 0; - - for (var z = 0; z < 3; z++) { - sum += m1[x][z] * m2[z][y]; - } - - result[x][y] = sum; - } - } - return result; - } - - function copyState(o1, o2) { - o2.fillStyle = o1.fillStyle; - o2.lineCap = o1.lineCap; - o2.lineJoin = o1.lineJoin; - o2.lineWidth = o1.lineWidth; - o2.miterLimit = o1.miterLimit; - o2.shadowBlur = o1.shadowBlur; - o2.shadowColor = o1.shadowColor; - o2.shadowOffsetX = o1.shadowOffsetX; - o2.shadowOffsetY = o1.shadowOffsetY; - o2.strokeStyle = o1.strokeStyle; - o2.globalAlpha = o1.globalAlpha; - o2.arcScaleX_ = o1.arcScaleX_; - o2.arcScaleY_ = o1.arcScaleY_; - o2.lineScale_ = o1.lineScale_; - } - - function processStyle(styleString) { - var str, alpha = 1; - - styleString = String(styleString); - if (styleString.substring(0, 3) == 'rgb') { - var start = styleString.indexOf('(', 3); - var end = styleString.indexOf(')', start + 1); - var guts = styleString.substring(start + 1, end).split(','); - - str = '#'; - for (var i = 0; i < 3; i++) { - str += dec2hex[Number(guts[i])]; - } - - if (guts.length == 4 && styleString.substr(3, 1) == 'a') { - alpha = guts[3]; - } - } else { - str = styleString; - } - - return {color: str, alpha: alpha}; - } - - function processLineCap(lineCap) { - switch (lineCap) { - case 'butt': - return 'flat'; - case 'round': - return 'round'; - case 'square': - default: - return 'square'; - } - } - - /** - * This class implements CanvasRenderingContext2D interface as described by - * the WHATWG. - * @param {HTMLElement} surfaceElement The element that the 2D context should - * be associated with - */ - function CanvasRenderingContext2D_(surfaceElement) { - this.m_ = createMatrixIdentity(); - - this.mStack_ = []; - this.aStack_ = []; - this.currentPath_ = []; - - // Canvas context properties - this.strokeStyle = '#000'; - this.fillStyle = '#000'; - - this.lineWidth = 1; - this.lineJoin = 'miter'; - this.lineCap = 'butt'; - this.miterLimit = Z * 1; - this.globalAlpha = 1; - this.canvas = surfaceElement; - - var el = surfaceElement.ownerDocument.createElement('div'); - el.style.width = surfaceElement.clientWidth + 'px'; - el.style.height = surfaceElement.clientHeight + 'px'; - el.style.overflow = 'hidden'; - el.style.position = 'absolute'; - surfaceElement.appendChild(el); - - this.element_ = el; - this.arcScaleX_ = 1; - this.arcScaleY_ = 1; - this.lineScale_ = 1; - } - - var contextPrototype = CanvasRenderingContext2D_.prototype; - contextPrototype.clearRect = function() { - this.element_.innerHTML = ''; - }; - - contextPrototype.beginPath = function() { - // TODO: Branch current matrix so that save/restore has no effect - // as per safari docs. - this.currentPath_ = []; - }; - - contextPrototype.moveTo = function(aX, aY) { - var p = this.getCoords_(aX, aY); - this.currentPath_.push({type: 'moveTo', x: p.x, y: p.y}); - this.currentX_ = p.x; - this.currentY_ = p.y; - }; - - contextPrototype.lineTo = function(aX, aY) { - var p = this.getCoords_(aX, aY); - this.currentPath_.push({type: 'lineTo', x: p.x, y: p.y}); - - this.currentX_ = p.x; - this.currentY_ = p.y; - }; - - contextPrototype.bezierCurveTo = function(aCP1x, aCP1y, - aCP2x, aCP2y, - aX, aY) { - var p = this.getCoords_(aX, aY); - var cp1 = this.getCoords_(aCP1x, aCP1y); - var cp2 = this.getCoords_(aCP2x, aCP2y); - bezierCurveTo(this, cp1, cp2, p); - }; - - // Helper function that takes the already fixed cordinates. - function bezierCurveTo(self, cp1, cp2, p) { - self.currentPath_.push({ - type: 'bezierCurveTo', - cp1x: cp1.x, - cp1y: cp1.y, - cp2x: cp2.x, - cp2y: cp2.y, - x: p.x, - y: p.y - }); - self.currentX_ = p.x; - self.currentY_ = p.y; - } - - contextPrototype.quadraticCurveTo = function(aCPx, aCPy, aX, aY) { - // the following is lifted almost directly from - // http://developer.mozilla.org/en/docs/Canvas_tutorial:Drawing_shapes - - var cp = this.getCoords_(aCPx, aCPy); - var p = this.getCoords_(aX, aY); - - var cp1 = { - x: this.currentX_ + 2.0 / 3.0 * (cp.x - this.currentX_), - y: this.currentY_ + 2.0 / 3.0 * (cp.y - this.currentY_) - }; - var cp2 = { - x: cp1.x + (p.x - this.currentX_) / 3.0, - y: cp1.y + (p.y - this.currentY_) / 3.0 - }; - - bezierCurveTo(this, cp1, cp2, p); - }; - - contextPrototype.arc = function(aX, aY, aRadius, - aStartAngle, aEndAngle, aClockwise) { - aRadius *= Z; - var arcType = aClockwise ? 'at' : 'wa'; - - var xStart = aX + mc(aStartAngle) * aRadius - Z2; - var yStart = aY + ms(aStartAngle) * aRadius - Z2; - - var xEnd = aX + mc(aEndAngle) * aRadius - Z2; - var yEnd = aY + ms(aEndAngle) * aRadius - Z2; - - // IE won't render arches drawn counter clockwise if xStart == xEnd. - if (xStart == xEnd && !aClockwise) { - xStart += 0.125; // Offset xStart by 1/80 of a pixel. Use something - // that can be represented in binary - } - - var p = this.getCoords_(aX, aY); - var pStart = this.getCoords_(xStart, yStart); - var pEnd = this.getCoords_(xEnd, yEnd); - - this.currentPath_.push({type: arcType, - x: p.x, - y: p.y, - radius: aRadius, - xStart: pStart.x, - yStart: pStart.y, - xEnd: pEnd.x, - yEnd: pEnd.y}); - - }; - - contextPrototype.rect = function(aX, aY, aWidth, aHeight) { - this.moveTo(aX, aY); - this.lineTo(aX + aWidth, aY); - this.lineTo(aX + aWidth, aY + aHeight); - this.lineTo(aX, aY + aHeight); - this.closePath(); - }; - - contextPrototype.strokeRect = function(aX, aY, aWidth, aHeight) { - var oldPath = this.currentPath_; - this.beginPath(); - - this.moveTo(aX, aY); - this.lineTo(aX + aWidth, aY); - this.lineTo(aX + aWidth, aY + aHeight); - this.lineTo(aX, aY + aHeight); - this.closePath(); - this.stroke(); - - this.currentPath_ = oldPath; - }; - - contextPrototype.fillRect = function(aX, aY, aWidth, aHeight) { - var oldPath = this.currentPath_; - this.beginPath(); - - this.moveTo(aX, aY); - this.lineTo(aX + aWidth, aY); - this.lineTo(aX + aWidth, aY + aHeight); - this.lineTo(aX, aY + aHeight); - this.closePath(); - this.fill(); - - this.currentPath_ = oldPath; - }; - - contextPrototype.createLinearGradient = function(aX0, aY0, aX1, aY1) { - var gradient = new CanvasGradient_('gradient'); - gradient.x0_ = aX0; - gradient.y0_ = aY0; - gradient.x1_ = aX1; - gradient.y1_ = aY1; - return gradient; - }; - - contextPrototype.createRadialGradient = function(aX0, aY0, aR0, - aX1, aY1, aR1) { - var gradient = new CanvasGradient_('gradientradial'); - gradient.x0_ = aX0; - gradient.y0_ = aY0; - gradient.r0_ = aR0; - gradient.x1_ = aX1; - gradient.y1_ = aY1; - gradient.r1_ = aR1; - return gradient; - }; - - contextPrototype.drawImage = function(image, var_args) { - var dx, dy, dw, dh, sx, sy, sw, sh; - - // to find the original width we overide the width and height - var oldRuntimeWidth = image.runtimeStyle.width; - var oldRuntimeHeight = image.runtimeStyle.height; - image.runtimeStyle.width = 'auto'; - image.runtimeStyle.height = 'auto'; - - // get the original size - var w = image.width; - var h = image.height; - - // and remove overides - image.runtimeStyle.width = oldRuntimeWidth; - image.runtimeStyle.height = oldRuntimeHeight; - - if (arguments.length == 3) { - dx = arguments[1]; - dy = arguments[2]; - sx = sy = 0; - sw = dw = w; - sh = dh = h; - } else if (arguments.length == 5) { - dx = arguments[1]; - dy = arguments[2]; - dw = arguments[3]; - dh = arguments[4]; - sx = sy = 0; - sw = w; - sh = h; - } else if (arguments.length == 9) { - sx = arguments[1]; - sy = arguments[2]; - sw = arguments[3]; - sh = arguments[4]; - dx = arguments[5]; - dy = arguments[6]; - dw = arguments[7]; - dh = arguments[8]; - } else { - throw Error('Invalid number of arguments'); - } - - var d = this.getCoords_(dx, dy); - - var w2 = sw / 2; - var h2 = sh / 2; - - var vmlStr = []; - - var W = 10; - var H = 10; - - // For some reason that I've now forgotten, using divs didn't work - vmlStr.push(' ' , - '', - ''); - - this.element_.insertAdjacentHTML('BeforeEnd', - vmlStr.join('')); - }; - - contextPrototype.stroke = function(aFill) { - var lineStr = []; - var lineOpen = false; - var a = processStyle(aFill ? this.fillStyle : this.strokeStyle); - var color = a.color; - var opacity = a.alpha * this.globalAlpha; - - var W = 10; - var H = 10; - - lineStr.push(''); - - if (!aFill) { - var lineWidth = this.lineScale_ * this.lineWidth; - - // VML cannot correctly render a line if the width is less than 1px. - // In that case, we dilute the color to make the line look thinner. - if (lineWidth < 1) { - opacity *= lineWidth; - } - - lineStr.push( - '' - ); - } else if (typeof this.fillStyle == 'object') { - var fillStyle = this.fillStyle; - var angle = 0; - var focus = {x: 0, y: 0}; - - // additional offset - var shift = 0; - // scale factor for offset - var expansion = 1; - - if (fillStyle.type_ == 'gradient') { - var x0 = fillStyle.x0_ / this.arcScaleX_; - var y0 = fillStyle.y0_ / this.arcScaleY_; - var x1 = fillStyle.x1_ / this.arcScaleX_; - var y1 = fillStyle.y1_ / this.arcScaleY_; - var p0 = this.getCoords_(x0, y0); - var p1 = this.getCoords_(x1, y1); - var dx = p1.x - p0.x; - var dy = p1.y - p0.y; - angle = Math.atan2(dx, dy) * 180 / Math.PI; - - // The angle should be a non-negative number. - if (angle < 0) { - angle += 360; - } - - // Very small angles produce an unexpected result because they are - // converted to a scientific notation string. - if (angle < 1e-6) { - angle = 0; - } - } else { - var p0 = this.getCoords_(fillStyle.x0_, fillStyle.y0_); - var width = max.x - min.x; - var height = max.y - min.y; - focus = { - x: (p0.x - min.x) / width, - y: (p0.y - min.y) / height - }; - - width /= this.arcScaleX_ * Z; - height /= this.arcScaleY_ * Z; - var dimension = m.max(width, height); - shift = 2 * fillStyle.r0_ / dimension; - expansion = 2 * fillStyle.r1_ / dimension - shift; - } - - // We need to sort the color stops in ascending order by offset, - // otherwise IE won't interpret it correctly. - var stops = fillStyle.colors_; - stops.sort(function(cs1, cs2) { - return cs1.offset - cs2.offset; - }); - - var length = stops.length; - var color1 = stops[0].color; - var color2 = stops[length - 1].color; - var opacity1 = stops[0].alpha * this.globalAlpha; - var opacity2 = stops[length - 1].alpha * this.globalAlpha; - - var colors = []; - for (var i = 0; i < length; i++) { - var stop = stops[i]; - colors.push(stop.offset * expansion + shift + ' ' + stop.color); - } - - // When colors attribute is used, the meanings of opacity and o:opacity2 - // are reversed. - lineStr.push(''); - } else { - lineStr.push(''); - } - - lineStr.push(''); - - this.element_.insertAdjacentHTML('beforeEnd', lineStr.join('')); - }; - - contextPrototype.fill = function() { - this.stroke(true); - } - - contextPrototype.closePath = function() { - this.currentPath_.push({type: 'close'}); - }; - - /** - * @private - */ - contextPrototype.getCoords_ = function(aX, aY) { - var m = this.m_; - return { - x: Z * (aX * m[0][0] + aY * m[1][0] + m[2][0]) - Z2, - y: Z * (aX * m[0][1] + aY * m[1][1] + m[2][1]) - Z2 - } - }; - - contextPrototype.save = function() { - var o = {}; - copyState(this, o); - this.aStack_.push(o); - this.mStack_.push(this.m_); - this.m_ = matrixMultiply(createMatrixIdentity(), this.m_); - }; - - contextPrototype.restore = function() { - copyState(this.aStack_.pop(), this); - this.m_ = this.mStack_.pop(); - }; - - function matrixIsFinite(m) { - for (var j = 0; j < 3; j++) { - for (var k = 0; k < 2; k++) { - if (!isFinite(m[j][k]) || isNaN(m[j][k])) { - return false; - } - } - } - return true; - } - - function setM(ctx, m, updateLineScale) { - if (!matrixIsFinite(m)) { - return; - } - ctx.m_ = m; - - if (updateLineScale) { - // Get the line scale. - // Determinant of this.m_ means how much the area is enlarged by the - // transformation. So its square root can be used as a scale factor - // for width. - var det = m[0][0] * m[1][1] - m[0][1] * m[1][0]; - ctx.lineScale_ = sqrt(abs(det)); - } - } - - contextPrototype.translate = function(aX, aY) { - var m1 = [ - [1, 0, 0], - [0, 1, 0], - [aX, aY, 1] - ]; - - setM(this, matrixMultiply(m1, this.m_), false); - }; - - contextPrototype.rotate = function(aRot) { - var c = mc(aRot); - var s = ms(aRot); - - var m1 = [ - [c, s, 0], - [-s, c, 0], - [0, 0, 1] - ]; - - setM(this, matrixMultiply(m1, this.m_), false); - }; - - contextPrototype.scale = function(aX, aY) { - this.arcScaleX_ *= aX; - this.arcScaleY_ *= aY; - var m1 = [ - [aX, 0, 0], - [0, aY, 0], - [0, 0, 1] - ]; - - setM(this, matrixMultiply(m1, this.m_), true); - }; - - contextPrototype.transform = function(m11, m12, m21, m22, dx, dy) { - var m1 = [ - [m11, m12, 0], - [m21, m22, 0], - [dx, dy, 1] - ]; - - setM(this, matrixMultiply(m1, this.m_), true); - }; - - contextPrototype.setTransform = function(m11, m12, m21, m22, dx, dy) { - var m = [ - [m11, m12, 0], - [m21, m22, 0], - [dx, dy, 1] - ]; - - setM(this, m, true); - }; - - /******** STUBS ********/ - contextPrototype.clip = function() { - // TODO: Implement - }; - - contextPrototype.arcTo = function() { - // TODO: Implement - }; - - contextPrototype.createPattern = function() { - return new CanvasPattern_; - }; - - // Gradient / Pattern Stubs - function CanvasGradient_(aType) { - this.type_ = aType; - this.x0_ = 0; - this.y0_ = 0; - this.r0_ = 0; - this.x1_ = 0; - this.y1_ = 0; - this.r1_ = 0; - this.colors_ = []; - } - - CanvasGradient_.prototype.addColorStop = function(aOffset, aColor) { - aColor = processStyle(aColor); - this.colors_.push({offset: aOffset, - color: aColor.color, - alpha: aColor.alpha}); - }; - - function CanvasPattern_() {} - - // set up externs - G_vmlCanvasManager = G_vmlCanvasManager_; - CanvasRenderingContext2D = CanvasRenderingContext2D_; - CanvasGradient = CanvasGradient_; - CanvasPattern = CanvasPattern_; - -})(); - -} // if +// thanks to @aecend and @tmrDevelops for help with the code, and @XDBoy018 for starting the #canvas-club! + +// variables +var canvas = document.getElementById("c"); +var ctx = canvas.getContext("2d"); +var color = document.getElementById("color"); +var mousedown = false; +var mouseup = true; +var sizeIncrement = 1; +var size = 5; +var current = "draw"; +var theColor; + +// make the background color of the canvas be white +canvas.style.backgroundColor = "white"; + +// make the squares larger... +function grow(event) { + var mouseX = event.clientX || event.pageX; + var mouseY = event.clientY || event.pageY; + + while (mousedown = true && size < 10) { + sizeIncrement++; + size += sizeIncrement; + } + + ctx.fillRect(mouseX, mouseY, size, size); + ctx.fillStyle = randomColor(); +} + +// ...and make them go back to normal size +function shrink(event) { + var mouseX = event.clientX || event.pageX; + var mouseY = event.clientY || event.pageY; + + if (mouseup = true && size > 5) { + size = 5; + } +} + +// are we drawing with a random color, erasing, +// or drawing with a specific color? +function tool(event) { + var mouseX = event.clientX || event.pageX; + var mouseY = event.clientY || event.pageY; + + if (current == "draw") { + ctx.fillStyle = randomColor(); + ctx.fillRect(mouseX, mouseY, size, size); + } + else if (current == "erase") { + ctx.clearRect(mouseX, mouseY, size, size); + } + else if (current == "color") { + ctx.fillStyle = document.getElementById('color').value; + ctx.fillRect(mouseX, mouseY, size, size); + } +} + +// tell tool() what we're doing +function eraser() { + current = "erase"; +} + +function draw() { + current = "draw"; +} + +function setColor() { + current = "color"; + theColor = document.getElementById('color').value; +} + +// get a random color in rgb() format +function randomColor() { + var r = 255 * Math.random() | 0; + var g = 255 * Math.random() | 0; + var b = 255 * Math.random() | 0; + return 'rgb(' + r + ',' + g + ',' + b + ')'; +} + +// clear the canvas +function clear() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + + sizeIncrement = 1 + size = 5; + ctx.fillStyle = randomColor(); + canvas.style.backgroundColor = "white"; +} + +// set a custom background color +function setbgColor() { + canvas.style.backgroundColor = document.getElementById('color').value; +} + +// take a picture of the canvas +function savePicture() { + var canvas2 = document.createElement("canvas"); // create a temporary canvas + var ctx2 = canvas2.getContext("2d"); // get its context + canvas2.width = canvas.width; // set its width + canvas2.height = canvas.height; // set its height + + ctx2.drawImage(canvas, 0, 0); // draw the main canvas onto it + + ctx.fillStyle = canvas.style.backgroundColor; // set the fillStyle to the CSS color + ctx.fillRect(0, 0, canvas.width, canvas.height); // fill the main canvas that color + ctx.fillStyle = theColor; // set the fillStyle back to what it was + + ctx.drawImage(canvas2, 0, 0); // draw the temporary canvas on top of the main one + + window.open(canvas.toDataURL()); // convert to image and open a window + + ctx.clearRect(0, 0, canvas.width, canvas.height); //Clear main canvas + ctx.drawImage(canvas2, 0, 0); // put original image back on main canvas +} + +// here's where we call functions +window.onload = draw; + +canvas.addEventListener("mousedown", grow); +canvas.addEventListener("mouseup", shrink); +canvas.addEventListener("mousemove", tool); + +document.getElementById("clear").onclick = clear; +document.getElementById("draw").onclick = draw; +document.getElementById("erase").onclick = eraser; +document.getElementById('set-color').onclick = setColor; +document.getElementById("random-color").onclick = draw; +document.getElementById("background-color").onclick = setbgColor; +document.getElementById("picture").onclick = savePicture; From 87a0a966737f05a9e94cfbbe95307af2ce979af5 Mon Sep 17 00:00:00 2001 From: durgeshkaushik <34072223+durgeshkaushik@users.noreply.github.com> Date: Tue, 13 Oct 2020 08:27:30 +0530 Subject: [PATCH 4/4] Delete html5-canvas-drawing-app.js --- html5-canvas-drawing-app.js | 443 ------------------------------------ 1 file changed, 443 deletions(-) delete mode 100644 html5-canvas-drawing-app.js diff --git a/html5-canvas-drawing-app.js b/html5-canvas-drawing-app.js deleted file mode 100644 index a8bc14a..0000000 --- a/html5-canvas-drawing-app.js +++ /dev/null @@ -1,443 +0,0 @@ -// 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. - -/*jslint browser: true */ -/*global G_vmlCanvasManager */ - -var drawingApp = (function () { - - "use strict"; - - var canvas, - context, - canvasWidth = 490, - canvasHeight = 220, - colorPurple = "#cb3594", - colorGreen = "#659b41", - colorYellow = "#ffcf33", - colorBrown = "#986928", - outlineImage = new Image(), - crayonImage = new Image(), - markerImage = new Image(), - eraserImage = new Image(), - crayonBackgroundImage = new Image(), - markerBackgroundImage = new Image(), - eraserBackgroundImage = new Image(), - crayonTextureImage = new Image(), - clickX = [], - clickY = [], - clickColor = [], - clickTool = [], - clickSize = [], - clickDrag = [], - paint = false, - curColor = colorPurple, - curTool = "crayon", - curSize = "normal", - mediumStartX = 18, - mediumStartY = 19, - mediumImageWidth = 93, - mediumImageHeight = 46, - drawingAreaX = 111, - drawingAreaY = 11, - drawingAreaWidth = 267, - drawingAreaHeight = 200, - toolHotspotStartY = 23, - toolHotspotHeight = 38, - sizeHotspotStartY = 157, - sizeHotspotHeight = 36, - totalLoadResources = 8, - curLoadResNum = 0, - sizeHotspotWidthObject = { - huge: 39, - large: 25, - normal: 18, - small: 16 - }, - - // Clears the canvas. - clearCanvas = function () { - - context.clearRect(0, 0, canvasWidth, canvasHeight); - }, - - // Redraws the canvas. - redraw = function () { - - var locX, - locY, - radius, - i, - selected, - - drawCrayon = function (x, y, color, selected) { - - context.beginPath(); - context.moveTo(x + 41, y + 11); - context.lineTo(x + 41, y + 35); - context.lineTo(x + 29, y + 35); - context.lineTo(x + 29, y + 33); - context.lineTo(x + 11, y + 27); - context.lineTo(x + 11, y + 19); - context.lineTo(x + 29, y + 13); - context.lineTo(x + 29, y + 11); - context.lineTo(x + 41, y + 11); - context.closePath(); - context.fillStyle = color; - context.fill(); - - if (selected) { - context.drawImage(crayonImage, x, y, mediumImageWidth, mediumImageHeight); - } else { - context.drawImage(crayonImage, 0, 0, 59, mediumImageHeight, x, y, 59, mediumImageHeight); - } - }, - - drawMarker = function (x, y, color, selected) { - - context.beginPath(); - context.moveTo(x + 10, y + 24); - context.lineTo(x + 10, y + 24); - context.lineTo(x + 22, y + 16); - context.lineTo(x + 22, y + 31); - context.closePath(); - context.fillStyle = color; - context.fill(); - - if (selected) { - context.drawImage(markerImage, x, y, mediumImageWidth, mediumImageHeight); - } else { - context.drawImage(markerImage, 0, 0, 59, mediumImageHeight, x, y, 59, mediumImageHeight); - } - }; - - // Make sure required resources are loaded before redrawing - if (curLoadResNum < totalLoadResources) { - return; - } - - clearCanvas(); - - if (curTool === "crayon") { - - // Draw the crayon tool background - context.drawImage(crayonBackgroundImage, 0, 0, canvasWidth, canvasHeight); - - // Draw purple crayon - selected = (curColor === colorPurple); - locX = selected ? 18 : 52; - locY = 19; - drawCrayon(locX, locY, colorPurple, selected); - - // Draw green crayon - selected = (curColor === colorGreen); - locX = selected ? 18 : 52; - locY += 46; - drawCrayon(locX, locY, colorGreen, selected); - - // Draw yellow crayon - selected = (curColor === colorYellow); - locX = selected ? 18 : 52; - locY += 46; - drawCrayon(locX, locY, colorYellow, selected); - - // Draw brown crayon - selected = (curColor === colorBrown); - locX = selected ? 18 : 52; - locY += 46; - drawCrayon(locX, locY, colorBrown, selected); - - } else if (curTool === "marker") { - - // Draw the marker tool background - context.drawImage(markerBackgroundImage, 0, 0, canvasWidth, canvasHeight); - - // Draw purple marker - selected = (curColor === colorPurple); - locX = selected ? 18 : 52; - locY = 19; - drawMarker(locX, locY, colorPurple, selected); - - // Draw green marker - selected = (curColor === colorGreen); - locX = selected ? 18 : 52; - locY += 46; - drawMarker(locX, locY, colorGreen, selected); - - // Draw yellow marker - selected = (curColor === colorYellow); - locX = selected ? 18 : 52; - locY += 46; - drawMarker(locX, locY, colorYellow, selected); - - // Draw brown marker - selected = (curColor === colorBrown); - locX = selected ? 18 : 52; - locY += 46; - drawMarker(locX, locY, colorBrown, selected); - - } else if (curTool === "eraser") { - - context.drawImage(eraserBackgroundImage, 0, 0, canvasWidth, canvasHeight); - context.drawImage(eraserImage, 18, 19, mediumImageWidth, mediumImageHeight); - } - - // Draw line on ruler to indicate size - switch (curSize) { - case "small": - locX = 467; - break; - case "normal": - locX = 450; - break; - case "large": - locX = 428; - break; - case "huge": - locX = 399; - break; - default: - break; - } - locY = 189; - context.beginPath(); - context.rect(locX, locY, 2, 12); - context.closePath(); - context.fillStyle = '#333333'; - context.fill(); - - // Keep the drawing in the drawing area - context.save(); - context.beginPath(); - context.rect(drawingAreaX, drawingAreaY, drawingAreaWidth, drawingAreaHeight); - context.clip(); - - // For each point drawn - for (i = 0; i < clickX.length; i += 1) { - - // Set the drawing radius - switch (clickSize[i]) { - case "small": - radius = 2; - break; - case "normal": - radius = 5; - break; - case "large": - radius = 10; - break; - case "huge": - radius = 20; - break; - default: - break; - } - - // Set the drawing path - context.beginPath(); - // If dragging then draw a line between the two points - if (clickDrag[i] && i) { - context.moveTo(clickX[i - 1], clickY[i - 1]); - } else { - // The x position is moved over one pixel so a circle even if not dragging - context.moveTo(clickX[i] - 1, clickY[i]); - } - context.lineTo(clickX[i], clickY[i]); - - // Set the drawing color - 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.lineCap = "round"; - context.lineJoin = "round"; - context.lineWidth = radius; - context.stroke(); - } - context.closePath(); - //context.globalCompositeOperation = "source-over";// To erase instead of draw over with white - context.restore(); - - // Overlay a crayon texture (if the current tool is crayon) - if (curTool === "crayon") { - context.globalAlpha = 0.4; // No IE support - context.drawImage(crayonTextureImage, 0, 0, canvasWidth, canvasHeight); - } - context.globalAlpha = 1; // No IE support - - // Draw the outline image - context.drawImage(outlineImage, drawingAreaX, drawingAreaY, drawingAreaWidth, drawingAreaHeight); - }, - - // Adds a point to the drawing array. - // @param x - // @param y - // @param dragging - addClick = function (x, y, dragging) { - - clickX.push(x); - clickY.push(y); - clickTool.push(curTool); - clickColor.push(curColor); - clickSize.push(curSize); - clickDrag.push(dragging); - }, - - // Add mouse and touch event listeners to the canvas - createUserEvents = function () { - - var press = function (e) { - // Mouse down location - var sizeHotspotStartX, - mouseX = (e.changedTouches ? e.changedTouches[0].pageX : e.pageX) - this.offsetLeft, -mouseY = (e.changedTouches ? e.changedTouches[0].pageY : e.pageY) - this.offsetTop; - - if (mouseX < drawingAreaX) { // Left of the drawing area - if (mouseX > mediumStartX) { - if (mouseY > mediumStartY && mouseY < mediumStartY + mediumImageHeight) { - curColor = colorPurple; - } else if (mouseY > mediumStartY + mediumImageHeight && mouseY < mediumStartY + mediumImageHeight * 2) { - curColor = colorGreen; - } else if (mouseY > mediumStartY + mediumImageHeight * 2 && mouseY < mediumStartY + mediumImageHeight * 3) { - curColor = colorYellow; - } else if (mouseY > mediumStartY + mediumImageHeight * 3 && mouseY < mediumStartY + mediumImageHeight * 4) { - curColor = colorBrown; - } - } - } else if (mouseX > drawingAreaX + drawingAreaWidth) { // Right of the drawing area - - if (mouseY > toolHotspotStartY) { - if (mouseY > sizeHotspotStartY) { - sizeHotspotStartX = drawingAreaX + drawingAreaWidth; - if (mouseY < sizeHotspotStartY + sizeHotspotHeight && mouseX > sizeHotspotStartX) { - if (mouseX < sizeHotspotStartX + sizeHotspotWidthObject.huge) { - curSize = "huge"; - } else if (mouseX < sizeHotspotStartX + sizeHotspotWidthObject.large + sizeHotspotWidthObject.huge) { - curSize = "large"; - } else if (mouseX < sizeHotspotStartX + sizeHotspotWidthObject.normal + sizeHotspotWidthObject.large + sizeHotspotWidthObject.huge) { - curSize = "normal"; - } else if (mouseX < sizeHotspotStartX + sizeHotspotWidthObject.small + sizeHotspotWidthObject.normal + sizeHotspotWidthObject.large + sizeHotspotWidthObject.huge) { - curSize = "small"; - } - } - } else { - if (mouseY < toolHotspotStartY + toolHotspotHeight) { - curTool = "crayon"; - } else if (mouseY < toolHotspotStartY + toolHotspotHeight * 2) { - curTool = "marker"; - } else if (mouseY < toolHotspotStartY + toolHotspotHeight * 3) { - curTool = "eraser"; - } - } - } - } - paint = true; - addClick(mouseX, mouseY, false); - redraw(); - }, - - drag = function (e) { - - var mouseX = (e.changedTouches ? e.changedTouches[0].pageX : e.pageX) - this.offsetLeft, - mouseY = (e.changedTouches ? e.changedTouches[0].pageY : e.pageY) - this.offsetTop; - - if (paint) { - addClick(mouseX, mouseY, true); - redraw(); - } - // Prevent the whole page from dragging if on mobile - e.preventDefault(); - }, - - release = function () { - paint = false; - redraw(); - }, - - cancel = function () { - paint = false; - }; - - // Add mouse event listeners to canvas element - canvas.addEventListener("mousedown", press, false); - canvas.addEventListener("mousemove", drag, false); - canvas.addEventListener("mouseup", release); - canvas.addEventListener("mouseout", cancel, false); - - // Add touch event listeners to canvas element - canvas.addEventListener("touchstart", press, false); - canvas.addEventListener("touchmove", drag, false); - canvas.addEventListener("touchend", release, false); - canvas.addEventListener("touchcancel", cancel, false); - }, - - // Calls the redraw function after all neccessary resources are loaded. - resourceLoaded = function () { - - curLoadResNum += 1; - if (curLoadResNum === totalLoadResources) { - redraw(); - createUserEvents(); - } - }, - - // Creates a canvas element, loads images, adds events, and draws the canvas for the first time. - init = function () { - - // Create the canvas (Neccessary for IE because it doesn't know what a canvas element is) - canvas = document.createElement('canvas'); - canvas.setAttribute('width', canvasWidth); - canvas.setAttribute('height', canvasHeight); - canvas.setAttribute('id', 'canvas'); - document.getElementById('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 - crayonImage.onload = resourceLoaded; - crayonImage.src = "images/crayon-outline.png"; - - markerImage.onload = resourceLoaded; - markerImage.src = "images/marker-outline.png"; - - eraserImage.onload = resourceLoaded; - eraserImage.src = "images/eraser-outline.png"; - - crayonBackgroundImage.onload = resourceLoaded; - crayonBackgroundImage.src = "images/crayon-background.png"; - - markerBackgroundImage.onload = resourceLoaded; - markerBackgroundImage.src = "images/marker-background.png"; - - eraserBackgroundImage.onload = resourceLoaded; - eraserBackgroundImage.src = "images/eraser-background.png"; - - crayonTextureImage.onload = resourceLoaded; - crayonTextureImage.src = "images/crayon-texture.png"; - - outlineImage.onload = resourceLoaded; - outlineImage.src = "images/watermelon-duck-outline.png"; - }; - - return { - init: init - }; -}()); \ No newline at end of file