HTML5 canvas paint blending color tool

Question

Hello i need create blending color tool, i try take color pixel from canvas with getImageData and mixed with my selected color and get average color, i can get it with easy:

/* r1 = red channel from getImageData
   g1 = green channel from getImageData
   b1 = blue channel from getImageData

   r2 = red channel my selected color
   g2,b2 same
*/   
var avR = Math.round(0.5*r1 + 0.5*r2);
var avG = Math.round(0.5*g1 + 0.5*g2);
var avB = Math.round(0.5*b1 + 0.5*b2);

While i drawing i try mixed this colors, but blending effect not available..

Maybe somebody can help me? http://jsfiddle.net/b72ky2sc/6/

i need that tool can get image in left side:

Answer 1

You don't state enough details, but here is how you can use blending modes with canvas. Note that IE do not support any of these yet (except from normal) so test this in recent Firefox or Chrome.

All blending modes in the current revised canvas standard is listed in the drop-down you can use to select mode. This way you can see which mode suits your need most (try things like hard-light with a low alpha value as a start...).

(yeah, I got bored.. :) )

var cont = document.getElementById("spots"),      // UI elements
    canvas = document.getElementById("canvas"),
    alpha = document.getElementById("alpha"),
    modes = document.getElementById("modes"),
    ctx = canvas.getContext("2d"),
    isDown = false,                               // defaults
    color = "rgb(107, 122, 174)";

// set up color palette using a custom "Spot" object
// This will use a callback function when it is clicked, to
// change current color
function Spot(color, cont, callback) {
  var div = document.createElement("div");
  div.style.cssText = "width:50px;height:50px;border:1px solid #000;margin:0 1px 1px 0;background:" + color;
  div.onclick = function() {callback(color)};
  cont.appendChild(div);    
}

// add some spot colors to our palette container
new Spot(color, cont, setColor);
new Spot("rgb(107, 174, 170)", cont, setColor);
new Spot("#00f", cont, setColor);
new Spot("#ff0", cont, setColor);
new Spot("#0ff", cont, setColor);
new Spot("#f0f", cont, setColor);

// this will set current fill style based on spot clicked
function setColor(c) {ctx.fillStyle = c}

// setup defaults
ctx.fillStyle = color;
ctx.globalAlpha = 0.5;

// events
canvas.onmousedown = function() {isDown = true};
window.onmouseup = function() {isDown = false};
window.onmousemove = function(e) {
  if (!isDown) return;
  var r = canvas.getBoundingClientRect(),
      x = e.clientX - r.left,
      y = e.clientY - r.top;
  
  ctx.beginPath();
  ctx.arc(x, y, 25, 0, 2*Math.PI);
  ctx.fill();
};

alpha.onchange = function(){ctx.globalAlpha = alpha.value * 0.01};
modes.onchange = function(){ctx.globalCompositeOperation = modes.value};

body{font:14px sans-serif;background:#333;color:#eee}
#spots {float:right}
#canvas {background:#fff;cursor:crosshair;border:1px solid #777}

<label for="modes">Blending Modes:</label>
<select id="modes">
  <option value="normal">normal</option>
  <option value="multiply">multiply</option>
  <option value="screen">screen</option>
  <option value="overlay">overlay</option>
  <option value="darken">darken</option>
  <option value="lighten">lighten</option>
  <option value="color-dodge">color-dodge</option>
  <option value="color-burn">color-burn</option>
  <option value="hard-light">hard-light</option>
  <option value="soft-light">soft-light</option>
  <option value="difference">difference</option>
  <option value="exclusion">exclusion</option>
  <option value="hue">hue</option>
  <option value="saturation">saturation</option>
  <option value="color">color</option>
  <option value="luminosity">luminosity</option>
</select>
<label for="alpha">Alpha:</label><input id="alpha" type="range" min=0 max=100 value="50">
<br>
<canvas id="canvas" width=500 height=500></canvas><div id="spots"></div>