Draw Like Never Before

Developer
Eleftheria Batsou
Size
2,372 Kb
Views
20,240
  1. Draw Like Never Before Previews
  2. Draw Like Never Before HTML Codes
  3. Draw Like Never Before CSS Codes

How do I make an draw like never before?

Day: 11 of 100Click and mouse the mouse to draw whatever you like. You can change the drawing pen from the script.. What is a draw like never before? How do you make a draw like never before? This script and codes were developed by Eleftheria Batsou on 27 October 2022, Thursday.

Draw Like Never Before Previews
IQ Test

Draw Like Never Before - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Draw Like Never Before</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html lang="en">
<head> <meta charset="UTF-8"> <title>HTML5 Canvas</title>
</head>
<body> <h3 class="text-center header">Click and move the mouse to draw like never before!</h3>
<canvas id="draw" width="800" height="800"></canvas>
<script>	const canvas = document.querySelector('#draw');	const ctx = canvas.getContext('2d');	canvas.width = window.innerWidth;	canvas.height = window.innerHeight;	ctx.strokeStyle = '#BADA55'; //ctx is the canvas	ctx.lineJoin = 'round';	ctx.lineCap = 'round';	ctx.lineWidth = 100;	// ctx.globalCompositeOperation = 'multiply';	let isDrawing = false;
let lastX = 0;
let lastY = 0;
let hue = 0;
let direction = true;
function draw(e) { if (!isDrawing) return; // stop the fn from running when they are not moused down console.log(e); ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`; ctx.beginPath(); // start from ctx.moveTo(lastX, lastY); // go to ctx.lineTo(e.offsetX, e.offsetY); ctx.stroke(); [lastX, lastY] = [e.offsetX, e.offsetY]; hue++; if (hue >= 360) { hue = 0; } if (ctx.lineWidth >= 100 || ctx.lineWidth <= 1) { direction = !direction; } if(direction) { ctx.lineWidth++; } else { ctx.lineWidth--; }
}
canvas.addEventListener('mousedown', (e) => { isDrawing = true; [lastX, lastY] = [e.offsetX, e.offsetY];
});
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', () => isDrawing = false);
canvas.addEventListener('mouseout', () => isDrawing = false); </script> <div class="row" id="footer"> <!-- for footer --> <h5><a href="http://www.eleftheriabatsou.com" target="_blank">Eleftheria</a> | <a href="https://codepen.io/EleftheriaBatsou" target="_blank">Projects</a> | <a href="https://www.youtube.com/channel/UCC-WwYv3DEW7Nkm_IP6VeQQ" target="_blank"> Coding videos </a></h5> </div> <!-- end footer -->
</body>
</html>
</body>
</html>

Draw Like Never Before - Script Codes CSS Codes

 html, body { margin:0; }
#footer{ padding-left: 20px;
}
Draw Like Never Before - Script Codes
Draw Like Never Before - Script Codes
Home Page Home
Developer Eleftheria Batsou
Username EleftheriaBatsou
Uploaded October 27, 2022
Rating 3.5
Size 2,372 Kb
Views 20,240
Do you need developer help for Draw Like Never Before?

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!

Eleftheria Batsou (EleftheriaBatsou) Script Codes
Name
Whack - A - Mole
Clock with JS
Video Player Custom Controls
Landing Page for an App
Code Player
Personal Portfolio Webpage
Calculate Calories and Macros
Postcode Finder and Map
Vertical Timeline - My life
Sun, earth and code
Create amazing blog posts 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!