A Pen by LukyVJ.

index.html

<div id="wrapper">
  <div id="header">    
    <h1>Paintvas</h1>
    <span class="hint"><a href="#">Guide <span class="entypo-help"></span></a></span>
    <h2>{ Paint + Canvas }</h2> 
    <h3>A <s>school</s>Project by <a href="http://twitter.com/lukyvj">@lukyvj</a></h3>
  </div>
  <div id="nav">
    <div class="hints">
      <span>← Delete your draw</span>
      <span>← Bigger line</span>
      <span>← Thinner Line</span>
      <span>← Save & Download</span>
      <span>← Line size</span>
    </div>
    <span onclick="clear();"  id="clear" class="first">   <span class="entypo-cancel-circled"></span>
    </span>
    
    <span onclick="big(i++);"  id="clear" class="">   
      <span class="entypo-plus"></span>
    </span>
    
    <span onclick="small(i--);"  id="clear" class="">   
      <span class="entypo-minus"></span>
    </span>
    
    <span onclick="imgMe();" class="">   
      <span class="entypo-picture"></span>  
    </span>
    
    <span>
      <span id="res" ></span>
    </span>
    
    <span>
      <span id="col" ></span>
    </span>
    
    
    
  </div>
  <div class="palette">  
     <div class="hints">
      <span>↑ Colors</span>
      <span>Draw here ↓</span>
    </div>
    
    <span onclick="changecouleur('#FF4351');placeColor(this.style.backgroundColor);" class="first" style="background:#FF4351"></span>
    
    <span onclick="changecouleur('#FF667A');" style="background:#FF667A"></span>
    
    <span onclick="changecouleur('#ED4694 ');" style="background:#ED4694 "></span>
    
    <span onclick="changecouleur('#DB49D8 ');" style="background:#DB49D8 "></span>
    
    <span onclick="changecouleur('#F668CA ');" style="background:#F668CA "></span>
    
    <span onclick="changecouleur('#DCD4F9 ');" style="background:#DCD4F9 "></span>
    
    <span onclick="changecouleur('#7B72E9 ');" style="background:#7B72E9 "></span>
    
    <span onclick="changecouleur('#1B9AF7 ');" style="background:#1B9AF7 "></span>
    
    <span onclick="changecouleur('#55DAE1');" style="background:#55DAE1 "></span>
    
    <span onclick="changecouleur('#B6F9B2 ');" style="background:#B6F9B2 "></span>
    
    <span onclick="changecouleur('#49E845 ');" style="background:#49E845 "></span>
    
    <span onclick="changecouleur('#A5DE37 ');" style="background:#A5DE37  "></span>
    
    <span onclick="changecouleur('#FFEB94 ');" style="background:#FFEB94 "></span>
    
    <span onclick="changecouleur('#FFE93B ');" style="background:#FFE93B "></span>
    
    <span onclick="changecouleur('#FEAE1B ');" style="background:#FEAE1B  "></span>
    
    <span onclick="changecouleur('#FE9949  ');" style="background:#FE9949 "></span>
    
    <span onclick="changecouleur('#FC880F ');" style="background:#FC880F  "></span>
    
    <span onclick="changecouleur('#FD6631  ');" style="background:#FD6631  "></span>
    
  </div>
 

  <canvas id="dessin" width="500" height="400"></canvas> 
  
  <div id="gallery"></div>
  
  
   
</div>

PAINTVAS-[WIP].markdown

PAINTVAS [WIP]

Basically, its a school project, but I'll try to extend a bit the features to make it more fun, intuitive, and better looking.

A Pen by LukyVJ on CodePen.

License.

script.js

var theCanvas = document.getElementById('dessin'),
    context = theCanvas.getContext('2d'),
    en_dessin = false,
    i = 1,
    gallery = document.getElementById('gallery'),
    col = document.getElementById('col');

context.strokeStyle = "grey";
context.lineWidth = i,
  colorMe = document.getElementById('col');

theCanvas.onmousedown = function(evt) {
  en_dessin = true;
  context.beginPath();
  context.moveTo(evt.offsetX,evt.offsetY);
};

theCanvas.onmousemove = function(evt) {
  if(en_dessin) dessiner(evt.offsetX,evt.offsetY);
};

theCanvas.onmouseup = function(evt) {
  en_dessin = false;
  context.closePath();
};
theCanvas.onmouseleave = function(evt) {
  en_dessin = false;
  context.closePath();
};

function dessiner(x,y) {
  context.lineTo(x,y);
  context.stroke();
}
document.getElementById('clear').addEventListener('click', function() {
  context.clearRect(0, 0, theCanvas.width, theCanvas.height);
}, false);
// Modification de la couleur du contexte
function changecouleur(macouleur) {
  if(macouleur) context.strokeStyle = macouleur;
  $('#col').css('background', macouleur).addClass('active');
}

function big(maSize) {
  if(maSize) context.lineWidth = maSize;
}
function small(maSize) {
  if(maSize) context.lineWidth = maSize;
}

$('#res').empty().append(i); 
$('span').on('click',function(){
  $('#res').empty().append(i);
});


function imgMe() {
  
  var img    = theCanvas.toDataURL("image/png"),
      gallery = document.getElementById('gallery');
  $('#gallery').append('<span class="gallery"><a id="downloadImgLink" onclick="dldImg();" download="MyImage.png" href="#" target="_blank"><img src="'+ img +'" /></a></span>');
  
  
}

function dldImg(){
  var img    = theCanvas.toDataURL("image/png");
  
  $('#downloadImgLink').attr('href',img);
}

var canvas = document.getElementById("dessin");
var ctx = canvas.getContext("2d");

var canvasOffset = $("#dessin").offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;

var startX;
var startY;
var isDown = false;

ctx.fillStyle = "skyblue";
ctx.strokeStyle = "lightgray";
ctx.lineWidth = 3;

var modeName = "square";

$('input[name=mode]').click(function () {
    modeName = $('input[name=mode]:checked').val();
    console.log(modeName);
});


function handleMouseDown(e) {
    mouseX = parseInt(e.clientX - offsetX);
    mouseY = parseInt(e.clientY - offsetY);

    // Put your mousedown stuff here
    startX = mouseX;
    startY = mouseY;
    isDown = true;
}

function handleMouseUp(e) {
    mouseX = parseInt(e.clientX - offsetX);
    mouseY = parseInt(e.clientY - offsetY);
    $("#uplog").html("Up: " + mouseX + " / " + mouseY);

    // Put your mouseup stuff here
    isDown = false;
}

function handleMouseMove(e) {
    mouseX = parseInt(e.clientX - offsetX);
    mouseY = parseInt(e.clientY - offsetY);

    // Put your mousemove stuff here
    if (!isDown) {
        return;
    }

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    switch (modeName) {
        case "rectangle":
            drawRectangle(mouseX, mouseY);
            break;
        case "square":
            drawSquare(mouseX, mouseY);
            break;
        default:
            break;
    }

}

function drawRectangle(mouseX, mouseY) {
    var width = mouseX - startX;
    var height = mouseY - startY;
    ctx.beginPath();
    ctx.rect(startX, startY, width, height);
    ctx.fill();
    ctx.stroke();
}

function drawSquare(mouseX, mouseY) {
    var width = Math.abs(mouseX - startX) * (mouseX < startX ? -1 : 1);
    var height = Math.abs(width) * (mouseY < startY ? -1 : 1);
    ctx.beginPath();
    ctx.rect(startX, startY, width, height);
    ctx.fill();
    ctx.stroke();
}



/*function triggerChange(){
    $("#rect").trigger("change");
}

$("#rect").change(function() {
    $('#wrapper').toggleClass("carre");
if($('#wrapper').is('.carre')){
  alert();
$("#dessin").mousedown(function (e) {
    handleMouseDown(e);
});
$("#dessin").mousemove(function (e) {
    handleMouseMove(e);
});
$("#dessin").mouseup(function (e) {
    handleMouseUp(e);
});
}
}); */




$('.hint').on('click',function(){
  $('.hints').fadeIn('slow');
  
  setTimeout(function(){
    $('.hints').fadeOut('slow');
  },4500);
});

style.scss

@import "compass";
@import url(http://weloveiconfonts.com/api/?family=entypo);
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed);

/* entypo */
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}

$s-1:2.05em;
$s-2:$s-1/2.25;
$c-0:#ccc;
$c-1:#333;
$c-2:lighten($c-1,40%);
$c-3:lighten($c-2,20%);
$c-4:#1B9AF7;
$c-5:lighten($c-4,30%);
$c-6:ligthen($c-0,60%);


html,body{
  width:100%;
  height:100%;
  padding:0;margin:0;}
body {
  background:#eee;
  text-align:center;
  padding-top:10%;
}
a{
  text-decoration:none;
  &:hover{background:transparent} 
}
#wrapper{
  width:100%;
  height:100%;
  margin:0 0 1em;
  padding:0;
  .palette{
    width:500px;
    margin:auto;
    span {
      display:block;
      float:left;
      width:$s-1/1.2;
      height:$s-1;
      border-radius:1%;
      cursor:pointer;
      /*-webkit-box-reflect:below 1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white));*/
      color:red;
      
      &.first{
      border-top-left-radius:.5em;
      border-bottom-left-radius:.5em;}
       &:last-child{
      border-top-right-radius:.5em;
      border-bottom-right-radius:.5em;}
      &:hover {
        border-color:black;
        -webkit-transform:scale(1.2);
      }
    }
  }
  canvas {
    cursor:crosshair;
    background:white;
    border-radius:4px;
    margin-top:40px;
  }
  
  #header{
    width:500px;
    height:80px;
    margin:-3em auto 1em;
    
    h1,h2,h3,.hint{
      text-align:left;
      line-height:1;
      display:block;
      margin:0;
      font-family:"Roboto Condensed",helvetica, sans-serif;
    }
    h1{color:$c-1;}
    h2{color:$c-2;} 
    h3{
      color:$c-3;
      float:right;
      margin-top:-$s-2*1.2;
      font-size:1em;
      a{color:$c-5;}
    } 
    .hint{
      float:right;
      margin-top:-$s-2*1.5;
      
      a{
        color:$c-5;
        font-size:1.4em;
      }

    }
    
    
  }
  .hints span{}
  #nav{
    position:fixed;
    top:0em;
    height:100%;
    background:rgba(0,0,0,.4);
    @include box-shadow(inset -.2em 0 .6em rgba(0,0,0,.2) );
    .hints{
      position:absolute;
      width:12em;
      margin:1em 3em;
      display:none;
      
      span{
        width:100%;
        display:block;
        text-align:left;
        margin-bottom:$s-1/1.25;
        padding:0 .4em;
        color:$c-2;
      }
    }
    #col{
      display:block;
      width:100%;
      height:100%;
    }
    >span{
      display:block;
      width:$s-1*1.4;
      height:$s-1*1.4;
      padding:.4em 1em;
      color:#fff;
      line-height:2;
      cursor:pointer;
      &.first:hover{
        background:rgba(255,0,0,.8);  
      }
      &:hover{
        background:rgba(0,0,0,.2); 
      }
       &:last-child:hover{
        background:rgba(0,0,0,0); 
      }
      #col{
      width:$s-1*1.4;
      margin:-.4em -1em;
      position:absolute;
      z-index:0;
      height:$s-1*1.4;
      cursor:normal;
        &.active{
        @include box-shadow(inset -.2em 0 .6em rgba(0,0,0,.2) );
        }
      }
    }
    
  }
   .hints{
      position:absolute;
      width:500px;
      margin:2.6em auto;
      left:0;right:0;
      display:none;
      span{
        width:50%;
        display:block;
        text-align:left;
        margin-bottom:$s-1/1.25;
        padding:0 5%;
      text-align:center;
        color:$c-2;
      &:hover{
      @include transform(scale(1));}
      }
    }
  
  #gallery{
    width:500px;
    margin:auto;
      margin:0 auto 4em;
    .gallery{
      width:$s-1*3;
      display:block;
      float:left;
      img{
        width:$s-1*3;
        display:block;
      }
       &:hover{
        img{border:1px solid $c-2}
       
        }
    }
    
    span:first-child{
      width: 6.15em;
      height:4.95em;
      overflow:hidden; 
      span{
        display:block;
        text-align:center;
        line-height:5;
        position:absolute;
        background:transparent;
        color:transparent;
        cursor:pointer;
      }
       &:hover{
          span{background:rgba(0,0,0,.2);color:#fff}
          }
    }
    
    
   
  }
}