Copy scratch canvas data to KineticJS layer -

I have a small image editor using kinetic JS:

For this webpad, Color 'image using the second image I use globalCompositeOperation = source-in for this, it works great This color I do in a popup (click on the color wheel in my example) in a different canvas. When the user finishes applying his ink, I want to add this scratch-pad-like canvas data as the layer of your main kineticjs canvas.

I can not get to do this work. I can add the reference directly to my main canvas, but then I cover my layer management and transparency. You will see that when you press the 'Inkt toepassen' button. For this, I use these lines:

  // Get the reference of the main canvas: var context = layer.getCanvas (). GetContext (); // Get image data from scratch pad: var imgData = inkContext.getImageData (0, 0, inkCanvas.width, inkCanvas.height); // Copy the image data in the main canvas context. InputJagadata (IMGDTA, 0, 0);  

How can I create kinetic JSs layer from data on my scratch pad?

It seems that you try to abduct the internal kineticsjs context to complete your compositing Although this works, its results are temporary because KineticJS will quickly retrieve and extract more context - (!) Why it is an internal reference that is an optional solution in one memory HTML canvas The element used is to create. For your composite drawing (this canvas is not required to be added to the DOM) then use this canvas as an image source for a canicic JS image, then any change in the canvas will be reflected through the kinetic image. Image

• Create an in-memory 'scratch' canvas

• Draw whatever scratches canvas

• Create a Kinetic.Image with Scratches Canvas in the form of an image source but is needed:

• When necessary, make changes to the scratched canvas and to layer.Draw () refresh Kinetic.Image with . The new changes will be displayed on the platform.

Here is an example that uses composites on the in-memory canvas element and displays results through a kinetic. Picture:

  var forum = new kinetic.stage ({container: 'container', width: 300, height: 300}); Var layer = new kinetic Layers (); Stage.add (layer); Var PI = Math PI; Var PI2 = PI * 2; Var cx = 50; Var cy = 50; Var radius = 50; Var angle = 0; Var Perimeter = 2 * Radius * Pi; Var cut count = 15; Var Cutteria = Perimeter / Discount / 2; Var canvas = document. CreateElement ('canvas') var ctx = canvas.getContext ('2d'); Canvas.width = 2 * radius; Canvas.height = 2 * radius; Ctx.beginPath (); Ctx.arc (CX, cy, radius, 0, PI2); Ctx.closePath (); Ctx.fillStyle = 'Blue'; Ctx.fill (); Var c = new kinetic Image ({image: canvas, x: 30, y: 30,}); Layer.add (c); Layer.draw (); $ (Click on "# test") or (function () {var x = cx + radius * Math.cos (angle) ;. var y = cy + radius * Math.sin (angle); angle + = (PI2 / cutCount); ctx.globalCompositeOperation = 'destination-out'; ctx.beginPath (); ctx.arc (x, y, cutRadius, 0, PI2); ctx.closePath (); ctx.fill (); ctx.globalCompositeOperation = 'Source over'; layer.draw ();});  

  body {padding: 20px;} #container {border: solid 1px #ccc; Margin-top: 10px; Width: 300px; Height: 300px; }  

  & lt; Script src = "http://d3lp1msu2r81bx.cloudfront.net/kjs/js/ lib / kinetic-v5.1.0.min.js" & gt; & Lt; / Script & gt; & Lt; Script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" & gt; & Lt; / Script & gt; & Lt; Button id = "test" & gt; Test & lt; / Button & gt; & Lt; Br> & Lt; H4 & gt; Through the 'Scratch' canvas Kanetiksjes & lt; / H4 & gt; & Lt; Div id = "container" & gt; & Gt; / Div & gt;