<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/GiorgioMalvone/pen/vEEQLg?limit=all&page=57&q=paint" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'><script src='https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js'></script><link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto+Condensed'><link rel='stylesheet prefetch' href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'><link rel='stylesheet prefetch' href='https://s3-us-west-2.amazonaws.com/s.cdpn.io/146084/hint.min.css'>
<style class="cp-pen-styles">body{
color: #D4D4D4;
font-family: 'Roboto Condensed', sans-serif;
}
.title{
text-align:center;
}
.heart{
color:#F75549;
}
.inputModule{
margin: 10%;
}
h1{
font-size:20px;
}
h2{
font-size:15px;
}
p{
font-size:13px;
}
canvas{
cursor:crosshair;
}
#colorTools{
display:inline;
font-size:20px;
margin-left:15px;
}
i{
cursor:pointer;
}
input[type="text"]{
display:block;
outline:none;
border:none;
background:#777;
color: #D4D4D4;
font-family: 'Roboto Condensed', sans-serif;
}
input[type="button"]{
margin-top:5px;
border:none;
background:#777;
color: #D4D4D4;
font-family: 'Roboto Condensed', sans-serif;
}
input[type="button"]:focus{
outline-color: #fff;
}
input[type="range"]{
-webkit-appearance: none !important;
height:2px;
background: #333;
outline:none;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none !important;
width: 15px;
height: 15px;
background:#D4D4D4;
}
input[type="color"]{
margin-top:5px;
border:none;
background:none;
outline:none;
width:30px;
height:30px;
}
label{
display:block;
text-selection:none;
user-select: none;
font-size: 15px;
}
#main-wrap {
background: #333;
height:100vh;
}
#sidebar {
background-color: #444;
height:100vh;
}
#content-wrap {
background-color: #333;
height:100vh;
}
#main-wrap > div {
min-height: 450px;
}
#main-wrap {
overflow: hidden;
}
#sidebar {
float: left;
width: 25%;
min-width:200px;
max-width:235px;
}
#content-wrap {
float: right;
width:75%;
}
::selection{
background: #ffbdb7;
}
.hint:after,[dataHint]:after{
margin-left:-5px;
background:#1f1f1f;
}
.hint--top:before{border-top-color:#1f1f1f}
.hint--bottom:before{border-bottom-color:#1f1f1f}
.hint--left:before{border-left-color:#1f1f1f}
.hint--right:before{border-right-color:#1f1f1f}
</style></head><body>
<div id="main-wrap">
<div id="sidebar">
<h1 class="title">Image Editor</h1>
<h2 class="title">Using Canvas</h2>
<div class="inputModule">
<p>This is a work-in-progress proof of concept for a drawing application using HTML 5. Created with <span class="heart">♥</span> by Giorgio Malvone.</p>
</div>
<!--Using both onchange and oninput, because IE 10 doesn't support oninput-->
<div class="inputModule">
<label>Image URL
<div class="hint--bottom" dataHint="Enter an Image URL to load it!">
<input type="text" id="urlIn" value="https://s3-us-west-2.amazonaws.com/s.cdpn.io/146084/baboon[1].jpg">
</div>
<input type="button" value="Load" id="load">
<input type="button" value="Default" id="defaultImg">
</label>
</div>
<div class="inputModule">
<label>Scale Image
<input id="scaler" oninput="scaleFactor.value=value" type="range" min="1" max="100" value="50">
<output id="scaleFactor">50</output>
</label>
</div>
<div class="inputModule">
<label>Ink Colour</label>
<input type="color" value="#3cb371" id="picker">
<div id="colorTools">
<div class="hint--top" dataHint="Colour Picker">
<i class="fa fa-eyedropper" id="colorDropper"></i>
</div>
<div class="hint--top" dataHint="Eraser">
<i class="fa fa-eraser" id="eraser"></i>
</div>
</div>
</div>
<div class="inputModule">
<label>Stroke Width
<input id="strokeScale" oninput="penSize.value=value" type="range" min="1" max="25" value="5">
<output id="penSize">5</output>
</label>
</div>
</div>
<div id="content-wrap">
<canvas id="c"></canvas>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script>
<script >console.clear();
//Canvas stuff
var canvas = document.getElementById("c"),
ctx = canvas.getContext("2d"),
mainSection = document.getElementById("content-wrap"),
sectionWidth = window.getComputedStyle(mainSection,null).width,
sectionHeight = window.getComputedStyle(mainSection,null).height;
//Makes the canvas the same width as the #content-wrap element
canvas.width = Number(sectionWidth.substring(0,sectionWidth.length-2));
canvas.height = 700;
//And then we just give the canvas a background colour
ctx.fillStyle = "#333";
ctx.fillRect(0,0,canvas.width,canvas.height);
//Getting all the buttons and UI elements
var imgLoad = document.getElementById("load"),
imgUrl = document.getElementById("urlIn"),
imgDefault = document.getElementById("defaultImg"),
imgScaler = document.getElementById("scaler"),
colorPicker = document.getElementById("picker"),
colorDropper = document.getElementById("colorDropper"),
colorErase = document.getElementById("eraser"),
strokeScaler = document.getElementById("strokeScale");
console.log(colorDropper);
//Variables
var img = new Image(),
defaultUrl = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/146084/baboon[1].jpg",
selectedTool = "paint",
mouseX = 0,
mouseY = 0,
oldMouseX = 0,
oldMouseY = 0;
//Default Image to be loaded
img.src = defaultUrl;
//Check for when the image has finished loading, then draw it. Fill the canvas first so the previous image gets cleared
img.addEventListener("load", function(){
ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.drawImage(img,0,0);
});
//Listen for button presses on the load new image button
imgLoad.addEventListener("click", function(){
img.src = imgUrl.value;
});
imgDefault.addEventListener("click", function(){
imgUrl.value = defaultUrl;
img.src = defaultUrl;
});
imgScaler.addEventListener("input", function(){
ctx.fillRect(0,0,canvas.width,canvas.height);
var multiplier = imgScaler.value / 50;
ctx.drawImage(img,0,0,img.width*multiplier,img.height*multiplier);
});
colorPicker.addEventListener("input", function(){
ctx.strokeStyle = colorPicker.value;
});
colorErase.addEventListener("click", function(){
ctx.strokeStyle = "#333";
});
colorDropper.addEventListener("click", function(){
console.log("Woo");
//Color picking logic here soon
});
strokeScaler.addEventListener("input", function(){
ctx.lineWidth = strokeScaler.value;
});
//Painting logic, thanks to http://codetheory.in/html5-canvas-drawing-lines-with-smooth-edges/
ctx.lineWidth = strokeScaler.value;
ctx.strokeStyle = colorPicker.value;
canvas.addEventListener("mousemove", function(event){
oldMouseX = mouseX;
oldMouseY = mouseY;
mouseX = event.pageX - this.offsetLeft;
mouseY = event.pageY - this.offsetTop;
});
canvas.addEventListener('mousedown', function(e) {
if(selectedTool === "paint"){canvas.addEventListener('mousemove', paint);}
else{
ctx.beginPath();
ctx.moveTo(oldMouseX, oldMouseY);
}
});
canvas.addEventListener('mouseup', function() {
if(selectedTool === "paint"){canvas.removeEventListener('mousemove', paint);}
else if(selectedTool === "line"){
ctx.lineTo(mouseX, mouseY);
ctx.closePath();
ctx.stroke();
}
});
function paint(){
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.beginPath();
ctx.moveTo(oldMouseX, oldMouseY);
ctx.lineTo(mouseX, mouseY);
ctx.closePath();
ctx.stroke();
};
//End of painting logic
//# sourceURL=pen.js
</script>
</body></html>
