Simple canvas drawing -- simplified lines

Developer
Anand Thakker
Size
3,127 Kb
Views
10,115

How do I make an simple canvas drawing -- simplified lines?

Grabs mouse points as the user draws, but then use [simplify.js][1] to (dramatically) reduce the number of points stored.. What is a simple canvas drawing -- simplified lines? How do you make a simple canvas drawing -- simplified lines? This script and codes were developed by Anand Thakker on 21 December 2022, Wednesday.

Simple canvas drawing -- simplified lines Previews
IQ Test

Simple canvas drawing -- simplified lines - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple canvas drawing -- simplified lines</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> Draw something:
<canvas id="canvas" width="900" height="600"></canvas> <script src='https://mourner.github.io/simplify-js/simplify.js'></script> <script src="js/index.js"></script>
</body>
</html>

Simple canvas drawing -- simplified lines - Script Codes CSS Codes

canvas { border: 1px solid gray; max-width: 100%;
}

Simple canvas drawing -- simplified lines - Script Codes JS Codes

(function() { var canvas, ctx, drawing, lines, mouseCoords, move, render, start, stop; canvas = document.getElementById('canvas'); ctx = canvas.getContext('2d'); mouseCoords = function(canvas, e) { var rect, ref, ref1, ref2, ref3, x, y; rect = canvas.getBoundingClientRect(); x = (ref = e.clientX) != null ? ref : (ref1 = e.changedTouches) != null ? ref1[0].clientX : void 0; y = (ref2 = e.clientY) != null ? ref2 : (ref3 = e.changedTouches) != null ? ref3[0].clientY : void 0; return [(x - rect.left) / rect.width * canvas.width, (y - rect.top) / rect.height * canvas.height]; }; drawing = false; lines = []; render = function(line) { var i, len, ref, x, y; ctx.beginPath(); for (i = 0, len = line.length; i < len; i++) { ref = line[i], x = ref.x, y = ref.y; ctx.lineTo(x, y); } ctx.stroke(); return ctx.closePath(); }; move = function(e) { var currentLine, ref, x, y; if (!drawing) { return; } e.preventDefault(); ref = mouseCoords(this, e), x = ref[0], y = ref[1]; currentLine = lines[lines.length - 1]; currentLine.push({ x: x, y: y }); return render(currentLine); }; start = function() { drawing = true; return lines.push([]); }; stop = function() { var currentLine, i, len, line, results; drawing = false; currentLine = lines[lines.length - 1]; currentLine.push(currentLine[0]); lines[lines.length - 1] = simplify(currentLine, 5); ctx.clearRect(0, 0, canvas.width, canvas.height); results = []; for (i = 0, len = lines.length; i < len; i++) { line = lines[i]; results.push(render(line)); } return results; }; canvas.addEventListener('mousemove', move, false); canvas.addEventListener('touchmove', move, false); canvas.addEventListener('mousedown', start); canvas.addEventListener('touchstart', start); canvas.addEventListener('mouseup', stop); canvas.addEventListener('touchend', stop);
}).call(this);
Simple canvas drawing -- simplified lines - Script Codes
Simple canvas drawing -- simplified lines - Script Codes
Home Page Home
Developer Anand Thakker
Username anandthakker
Uploaded December 21, 2022
Rating 3
Size 3,127 Kb
Views 10,115
Do you need developer help for Simple canvas drawing -- simplified lines?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Anand Thakker (anandthakker) Script Codes
Name
AngularJS responsive multi-range slider
Experimenting with SVG Patterns
A Pen by Anand Thakker
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!