El Paintio

Developer
Andrew
Size
2,985 Kb
Views
26,312
  1. El Paintio Previews
  2. El Paintio HTML Codes
  3. El Paintio CSS Codes
  4. El Paintio JS Codes

How do I make an el paintio?

What is a el paintio? How do you make a el paintio? This script and codes were developed by Andrew on 17 September 2022, Saturday.

El Paintio Previews
IQ Test

El Paintio - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>El Paintio</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!DOCTYPE html>
<html>
<head>	<meta charset="utf-8">	<title>El Paintio</title>
</head>
<body>
<canvas id='draw'></canvas>
<div id="tools">	<div class="color red"></div>	<div class="color orange"></div>	<div class="color yellow"></div>	<div class="color green"></div>	<div class="color light-blue"></div>	<div class="color blue"></div>	<div class="color violet"></div>	<div class="color pink"></div>	<div class="color teal"></div>	<div class="color grey"></div>	<div class="color brown"></div>	<div class="color white"></div>	<div class="color black"></div>	<div class="slider"><input autocomplete="off" id="size" type="range" name="blur" min="1" max="100" value="20" data-sizing="px"><p class="width">width: <span id="widthValue">20</span></p></div>	<div class="button" id="clear"><p>Clear</p></div>
</div>
</body>
</html> <script src="js/index.js"></script>
</body>
</html>

El Paintio - Script Codes CSS Codes

html, body {	margin: 0;	padding: 0;	overflow-y: hidden;	font-family: sans-serif;
}
#tools {	height: 10vh;	display: flex;	align-items: center;	background-color: #E0E0E0;	padding: 0;
}
.color {	width: 10vh;	height: 10vh;
}
.brush {	width: 10vh;	height: 10vh;	background-color: white;
}
.red {	background-color: #f44336;
}
.orange {	background-color: #FF9800;
}
.yellow {	background-color: #FFEB3B;
}
.green {	background-color: #4CAF50;
}
.light-blue {	background-color: #03A9F4;
}
.blue {	background-color: #283593;
}
.violet {	background-color: #6A1B9A;
}
.pink {	background-color: #E91E63;
}
.teal {	background-color: #009688;
}
.grey {	background-color: #757575;
}
.brown {	background-color: #795548;
}
.black {	background-color: black;
}
.white {	background-color: white;
}
input[type=range] { -webkit-appearance: none; margin: 7.5px 0;
}
input[type=range]:focus { outline: none;
}
input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 0px; cursor: pointer; box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0); background: rgba(48, 113, 169, 0.78); border-radius: 1.3px; border: 0.2px solid #757575;
}
input[type=range]::-webkit-slider-thumb { box-shadow: 0px 0px 0px #000001, 0px 0px 0px #00001b; border: 1.8px solid #000000; height: 15px; width: 15px; border-radius: 15px; background: #ffffff; cursor: pointer; -webkit-appearance: none; margin-top: -7.7px;
}
input[type=range]:focus::-webkit-slider-runnable-track { background: rgba(54, 126, 189, 0.78);
}
input[type=range]::-moz-range-track { width: 100%; height: 0px; cursor: pointer; box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0); background: rgba(48, 113, 169, 0.78); border-radius: 1.3px; border: 0.2px solid #757575;
}
input[type=range]::-moz-range-thumb { box-shadow: 0px 0px 0px #000001, 0px 0px 0px #00001b; border: 1.8px solid #000000; height: 15px; width: 15px; border-radius: 15px; background: #ffffff; cursor: pointer;
}
input[type=range]::-ms-track { width: 100%; height: 0px; cursor: pointer; background: transparent; border-color: transparent; color: transparent;
}
input[type=range]::-ms-fill-lower { background: rgba(42, 100, 149, 0.78); border: 0.2px solid #757575; border-radius: 2.6px; box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
}
input[type=range]::-ms-fill-upper { background: rgba(48, 113, 169, 0.78); border: 0.2px solid #757575; border-radius: 2.6px; box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
}
input[type=range]::-ms-thumb { box-shadow: 0px 0px 0px #000001, 0px 0px 0px #00001b; border: 1.8px solid #000000; height: 15px; width: 15px; border-radius: 15px; background: #ffffff; cursor: pointer; height: 0px;
}
input[type=range]:focus::-ms-fill-lower { background: rgba(48, 113, 169, 0.78);
}
input[type=range]:focus::-ms-fill-upper { background: rgba(54, 126, 189, 0.78);
}
.width {	text-align: center;	margin: 0;
}
.button {	color: white;	display: flex;	align-items: center;	justify-content: center;	width: 10vh;	height: 10vh;	background-color: #f44336;
}

El Paintio - Script Codes JS Codes

const canvas = document.getElementById('draw');
const ctx = canvas.getContext('2d');
const tools = document.getElementById('tools');
const slider = document.getElementById('size');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight - tools.offsetHeight;
const widthValue = document.getElementById('widthValue');
const colors = document.querySelectorAll('.color');
const clear = document.getElementById('clear');
let lastX = 0;
let lastY = 0;
let isDrawing = false;
ctx.strokeStyle = 'black';
ctx.fillStyle = 'white';
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.lineWidth = 20;
ctx.fillRect(0, 0, canvas.width, canvas.height);
function draw(e) {	if (!isDrawing) return; //stop the function	ctx.beginPath();	ctx.moveTo(lastX, lastY);	ctx.lineTo(e.offsetX, e.offsetY);	ctx.stroke();	[lastX, lastY] = [e.offsetX, e.offsetY];
}
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mousedown', (e) => {	isDrawing = true;	[lastX, lastY] = [e.offsetX, e.offsetY];
});
canvas.addEventListener('mouseup', () => isDrawing = false);
canvas.addEventListener('mouseout', () => isDrawing = false);
colors.forEach(color => color.onclick = function() {	ctx.strokeStyle = window.getComputedStyle(this, null)['background-color'];	console.log(window.getComputedStyle(this, null)['background-color']);
});
slider.addEventListener('input', function() {	ctx.lineWidth = this.value;	widthValue.innerText = this.value;
});
clear.onclick = function() {	ctx.fillRect(0, 0, canvas.width, canvas.height);
};
El Paintio - Script Codes
El Paintio - Script Codes
Home Page Home
Developer Andrew
Username nevada48
Uploaded September 17, 2022
Rating 3
Size 2,985 Kb
Views 26,312
Do you need developer help for El Paintio?

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!

Andrew (nevada48) Script Codes
Name
HEX Clock
Brent Burns Tribute Page
US States Quiz
A Pen by Andrew
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!