Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Yes, you just need to use <code>drawImage()</code> or <code>putImageData()</code>. The <code>drawImage()</code> function call can take a canvas as a data source parameter, so you can draw to your on-screen canvas using the off-screen one as the source. If you have transparency that you need to maintain, you will need to use <code>putImageData()</code> which does a complete overwrite of the existing canvas data. Conversely, <code>drawImage()</code> will apply a blending mode to the data using the <code>globalCompositeOperation</code> parameter of your context.</p> <pre><code>var offscreen_canvas = document.getElementById("offscreen_canvas"); var onscreen_canvas = document.getElementById("onscreen_canvas"); var onscreen_context = onscreen_canvas.getContext("2d"); // Don't care about transparency: onscreen_context.drawImage(offscreen_canvas, source_x, source_y, source_width, source_height, dest_x, dest_y, dest_width, dest_height); // Or, if we care about transparency preservation: var offscreen_context = offscreen_canvas.getContext("2d"); var offscreen_data = offscreen_context.getImageData(x, y, width, height); onscreen_context.putImageData(offscreen_data, dest_x, dest_y); </code></pre> <p>References: <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-drawimage">drawImage()</a> and <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-putimagedata">putImageData()</a>.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload