Painter

Simple Painter

by Pranab Dey

HTML

<canvas id="canvas1"></canvas>
<br>
<ul class="wrap">
<li id="red" class="active" style="background: red"></li>
<li id="green" style="background:green"></li>
<li id="blue" style="background: blue"></li>
<li id="circle">
  <ul>
  <li id="xs"></li>
  <li id="sm"></li>
  <li id="md"></li>
  <li id="lg"></li>
  <li id="xl"></li>
  <li id="xxl"></li>
  <li id="xxxl"></li>
  </ul>
</li>
<li id="erase"></li>
<li id="clear"></li>
<li id="save"></li>
</ul>
<div id="demo">
<img id="canImage"/>
</div>

CSS

#canvas1{
  background: white;
  cursor: crosshair;
}
.wrap{
  padding: 0;
}
.wrap li {
  display: table-cell;
	text-align: center;
  vertical-align: middle;
}
#clear,#save,#circle,#erase{
  width: 50px;height: 50px;background: lightgrey;border:1px solid grey;cursor: pointer;
}
#red,#green,#blue{
  width: 50px;height: 50px;cursor: pointer;
}
.canImage{
  background: white;
  color: black;
  padding: 4px 8px;
  border: 2px solid black;
  position: absolute;
  left:0;
}
#demo{
  position: absolute;
  border: 1px solid red;
  left: 0;
}
#circle ul{
  display: inline-flex;
  margin:0;padding-left: 5px;padding-right: 5px;
}
#circle ul li{
  margin: auto;
}
#circle #xs{
  width:10px;height:10px;
  border: 1px solid red;border-radius: 50%;
}
#circle #sm{
  width:15px;height:15px;
  border: 1px solid red;border-radius: 50%;
}
#circle #md{
  width:20px;height:20px;
  border: 1px solid red;border-radius: 50%;
}
#circle #lg{
  width:25px;height:25px;
  border: 1px solid red;border-radius: 50%;
}
#circle #xl{
  width:30px;height:30px;
  border: 1px solid red;border-radius: 50%;
}
#circle #xxl{
  width:35px;height:35px;
  border: 1px solid red;border-radius: 50%;
}
#circle #xxxl{
  width:40px;height:40px;
  border: 1px solid red;border-radius: 50%;
}
#circle ul > li:hover,#circle ul > li:focus{
  background: red;
}
.red{
  background: red;
}

JavaScript

var c = document.getElementById("canvas1"),
btn = document.getElementById("clear"),
erase = document.getElementById("erase"),
outputValue = document.getElementById("ageOutputId"),
inputValue = document.getElementById("ageInputId"),
save = document.getElementById("save"),
red = document.getElementById("red"),
green = document.getElementById("green"),
blue = document.getElementById("blue"),
ctx = c.getContext("2d"),
//strokes
xs = document.getElementById("xs"),
sm = document.getElementById("sm"),
md = document.getElementById("md"),
lg = document.getElementById("lg"),
xl = document.getElementById("xl"),
xxl = document.getElementById("xxl"),
xxxl = document.getElementById("xxxl"),
oldX=null,x,y,
oldY=null,
mousedown = false;

btn.innerHTML = "Clear";
save.innerHTML = "Save";
erase.innerHTML = "Erase";
//cir.innerHTML = "o";

save.addEventListener("click",imgSave);
function imgSave(){
var data = c.toDataURL("image/png");
document.getElementById("canImage").src = data;
var btnImg = document.createElement("a");
btnImg.innerHTML = "Download";
btnImg.setAttribute("class","canImage");
btnImg.href = data;
btnImg.download = 'image.png';
document.body.appendChild(btnImg);
//btnImg.addEventListener("click",down);
//window.location.href=data;
//alert(data);
}

function setCanvas(){
c.width = 500;
c.height = 300;
ctx.strokeStyle = "black";
ctx.lineWidth = 1;
ctx.lineCap = "round";
ctx.lineJoin = "round";
}

function lineWidth(){
inputValue.value = document.getElementById("ageInputId").value;
}

function clear(){
ctx.clearRect(0,0,c.width,c.height);
}

function movedown(event){
mousedown = true;
}

function moveup(event){
mousedown = false;
oldX=null;
oldY=null;
}

function move(event){
x = event.clientX;
y = event.clientY;
if(mousedown){
paint(x,y);
}
}

function paint(x,y){
ctx.beginPath();
if(oldX>0 && oldY>0){
ctx.moveTo(oldX,oldY);
}
ctx.lineTo(x,y);
oldX = x;oldY =...