globalCompositeOperation at jCanvas

Question

How can I integrate globalCompositeOperation(or any other plugin which will give me 'multiply' color manipulation) into jCanvas jQuery plugin?

// How do I get this working? //
var ctx = document.getElementById('canvas').getContext('2d');
ctx.globalCompositeOperation = 'darker';

// With this - //
$("canvas").drawArc({
  fillStyle: "#c7302a",
  x: 100, y: 100,
  radius: 50
});

$("canvas").drawArc({
  fillStyle: "#395797",
  x: 170, y: 100,
  radius: 50,
  opacity: 1
});

score 2 · Answer 1 · answered Jul 17 '13 at 18:03

2

For the record, jCanvas has a compositing property, the value for which maps to ctx.globalCompositeOperation.

$("canvas").drawArc({
  fillStyle: "#c7302a",
  x: 100, y: 100,
  radius: 50,
  compositing: 'darker'
});

-Caleb

answered Jul 17 '13 at 18:03

caleb531

4,111
6
31
41

Better late than never? – grmmph Jul 18 '13 at 05:43

score 1 · Accepted Answer · answered Jan 31 '13 at 14:11

Okay I solved it. After struggling with it for hours, it was too simple: I used context blender plugin.

JS code:

$("#canvasReal").drawArc({ // Draw on the real canvas
  fillStyle: "#c7302a",
  x: 100, y: 100,
  radius: 50
});

$("#canvasOff").drawArc({ // Draw on the off screen canvas
  fillStyle: "#395797",
  x: 150, y: 100,
  radius: 50
});

// Blend off-screen canvas onto the real canvas
    var over = canvasOff.getContext('2d'); 
    var under = canvasReal.getContext('2d');
    over.blendOnto(under,'multiply');

HTML code:

<canvas width="500" height="250" id="canvasReal"></canvas>
<canvas width="500" height="250"id="canvasOff" style="display:none;"></canvas>

globalCompositeOperation at jCanvas

2 Answers2