<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/misterneo/pen/aWPKoR?limit=all&page=13&q=paint" />
<style class="cp-pen-styles">html,
body {
margin: 0px;
background: gray;
font-family: monospace;
}
canvas {
display: block;
box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, .8);
}
#lc, #lw{
margin-top:0;
}
#ui{
position:absolute;
top:0;
left:75%;
box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, .8);
}
#linewidth {
background: white;
text-align: center;
padding: .2em;
padding-top: 0;
margin-top: 10px;
padding-bottom:1em;
padding-top:1em;
}
#ui {
float: right;
width: 25% ;
height: 100vh;
background: silver;
}
#color {
width: 20px;
height: 20px;
position: relative;
top: .5em;
background: black;
display: inline-block;
}
#colors {
text-align: left;
display: inline-block;
float: left;
line-height: 2em;
margin-left: 1.5em;
}
#clear{
}
input[type=range] {
-webkit-appearance: none;
width: 50%;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 70%;
height: 8.4px;
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: silver;
border-radius: 1.3px;
border: 0.2px solid #010101;
margin-top:.9em;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 16px;
width: 16px;
border-radius: 20px;
background: #ffffff;
cursor: pointer;
-webkit-appearance: none;
margin-top: -6px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
}
.iconB{
border:1px solid black;
padding:.3em;
border-radius:1em;
margin-left:2em;
}
.iconB:hover{
background:silver;
cursor:pointer;
}</style></head><body>
<canvas id="canvas"></canvas>
<div id="ui">
<div id="linewidth">
<p id="lw">Line width: <span id="wval">2px</span></p>
<input type="range" id="range" value="2" min="2" max="30">
</div>
<div id="linewidth">
<p id="lc">Line color: <span id="color"></span></p>
<div id="colors">
<span>Red</span><br>
<span>Green</span><br>
<span>Blue</span>
</div>
<div>
<input type="range" id="r" value="0" min="0" max="255">
<input type="range" id="g" value="0" min="0" max="255">
<input type="range" id="b" value="0" min="0" max="255">
</div>
</div>
<div id="linewidth">
<img src="https://cdn3.iconfinder.com/data/icons/metro-design/512/brush-512.png" width="8%" class="iconB" id="paint">
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/181386-200.png" width="8%" class="iconB" id="select">
<img src="https://image.flaticon.com/icons/svg/3/3885.svg" width="8%" class="iconB" id="undo">
<img src="https://image.flaticon.com/icons/svg/25/25996.svg" width="8%" class="iconB" id="clear">
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script>
<script >window.onload = function() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var width = (canvas.width = window.innerWidth);
var height = (canvas.height = window.innerHeight);
ctx.translate(width * 0.5, height * 0.5);
var down = false;
var p1 = { x: 0, y: 0 };
var p2 = { x: 0, y: 0 };
var xoff = (window.innerWidth - width) / 2;
var yoff = (window.innerHeight - height) / 2;
var trails = [];
var lineWidth = 2;
var selectWidth = 1;
var rval = 0;
var gval = 0;
var bval = 0;
var color = "rgb(" + rval + "," + gval + "," + bval + ")";
var lines = 0;
var first = true;
var paint = false;
var move = true;
update();
function update() {
drawOutline();
if(move){
drawRect(p1, p2);
}
for (var i = 0; i < trails.length; i++) {
for (var j = 0; j < trails[i].length - 1; j++) {
brush(
trails[i][j],
trails[i][j + 1],
trails[i][j + 1].c,
trails[i][j + 1].w
);
}
}
for(var i = 0; i < trails.length; i++){
//fillPath(trails[i]);
}
requestAnimationFrame(update);
}
function drawOutline() {
ctx.fillStyle = "white";
ctx.fillRect(-width * 0.5, -height * 0.5, width, height);
}
function brush(p1, p2, color, width) {
drawLine(p1, p2, color, width);
}
function drawPoint(x, y, color, size) {
ctx.beginPath();
ctx.arc(x, y, size, 0, 2 * Math.PI, false);
ctx.fillStyle = color;
ctx.fill();
}
function drawLine(p1, p2, color, width) {
ctx.beginPath();
ctx.lineJoin = ctx.lineCap = "round";
ctx.moveTo(p1.x, p1.y);
ctx.lineTo(p2.x, p2.y);
ctx.strokeStyle = color;
ctx.lineWidth = width;
ctx.stroke();
}
function fillPath(points){
ctx.beginPath();
ctx.moveTo(points[0].x, points[0].y);
var n = points.length;
for(var i = 0; i < n; i++){
ctx.lineTo(points[(i + 1) % n].x, points[(i + 1) % n].y);
}
ctx.fillStyle = "yellow";
ctx.fill();
}
function drawRect(p1, p2) {
var p3 = { x: p2.x, y: p1.y };
var p4 = { x: p1.x, y: p2.y };
var Rectpoints = [p1, p3, p2, p4];
ctx.beginPath();
ctx.moveTo(Rectpoints[0].x, Rectpoints[0].y);
for (var i = 0; i < Rectpoints.length; i++) {
ctx.lineTo(Rectpoints[(i + 1) % 4].x, Rectpoints[(i + 1) % 4].y);
}
ctx.strokeStyle = "black";
ctx.lineWidth = selectWidth;
ctx.setLineDash([6]);
ctx.stroke();
ctx.setLineDash([]);
ctx.fillStyle = "white";
ctx.fill();
}
document.body.addEventListener("mousedown", function(e) {
down = true;
var _x = e.clientX;
var _y = e.clientY;
p1 = { x: _x - width * 0.5 - xoff, y: _y - height * 0.5 - yoff };
p2 = { x: _x - width * 0.5 - xoff, y: _y - height * 0.5 - yoff };
if(paint){
if (first) {
trails[lines] = [];
first = false;
}
trails[lines].push({
x: _x - width * 0.5 - xoff,
y: _y - height * 0.5 - yoff,
c: color,
w: lineWidth
});
}
});
document.body.addEventListener("mousemove", function(e) {
if (down) {
var _x = e.clientX;
var _y = e.clientY;
p2 = { x: _x - width * 0.5 - xoff, y: _y - height * 0.5 - yoff };
if(paint){
trails[lines].push({
x: _x - width * 0.5 - xoff,
y: _y - height * 0.5 - yoff,
c: color,
w: lineWidth
});
}
}
});
document.body.addEventListener("mouseup", function(e) {
down = false;
if(paint){
first = true;
lines++;
}
});
function getE(id) {
return document.getElementById(id);
}
var Linewidth = getE("range");
var wval = getE("wval");
Linewidth.addEventListener("mouseup", function(e) {
lineWidth = Linewidth.value;
wval.innerHTML = lineWidth + "px";
});
var r = getE("r");
var g = getE("g");
var b = getE("b");
var lineColor = getE("color");
document.getElementById("canvas").addEventListener("mousemove", function() {
if(paint){
getE("canvas").style.cursor =
"url(http://www.rw-designer.com/cursor-extern.php?id=95701),default";
}
});
r.addEventListener("mouseup", function(e) {
rval = r.value;
color = "rgb(" + rval + "," + gval + "," + bval + ")";
lineColor.style.background = color;
});
g.addEventListener("mouseup", function(e) {
gval = g.value;
color = "rgb(" + rval + "," + gval + "," + bval + ")";
lineColor.style.background = color;
});
b.addEventListener("mouseup", function(e) {
bval = b.value;
color = "rgb(" + rval + "," + gval + "," + bval + ")";
lineColor.style.background = color;
});
document.getElementById("clear").addEventListener("click", function() {
trails = [];
lines = 0;
});
document.getElementById("undo").addEventListener("click", function() {
if (trails.length > 0) {
var index = trails.length - 2;
trails.splice(index, 2);
lines -= 2;
}
});
document.getElementById("select").addEventListener("click", function() {
move = true;
paint = false;
getE("canvas").style.cursor = "default";
});
document.getElementById("paint").addEventListener("click", function() {
move = false;
paint = true;
});
document.body.addEventListener("keydown", function(e) {
if (e.keyCode == 90 && event.ctrlKey && trails.length > 0) {
var index = trails.length - 1;
trails.splice(index, 1);
lines--;
}
});
// window.addEventListener("resize", function(){
// width = canvas.width = window.innerWidth * .5;
// height = canvas.height = window.innerHeight * .8;
// ctx.translate(width * .5, height * .5);
// xoff = (window.innerWidth - width)/2;
// yoff = (window.innerHeight - height)/2;
// drawOutline();
// });
};
//# sourceURL=pen.js
</script>
</body></html>
