Cross-origin data in HTML5 Canvas

For cross-origin data in canvas, add the following attribute to the <audio? or <video> element −

<img src="..." crossorigin="Anonymous" />
<video src="..." crossorigin="Anonymous"></video>

To enable cross-origin resource sharing, use the following. It allows the images to pass the HTTP header with an image response.

Access-Control-Allow-Origin: *

Or to solve the cross-origin data issue, use the following parameter −

--allow-file-access-from-files

Karthikeya Boyini

Published on 06-Apr-2018 06:24:13

• Related Questions & Answers
• Is their a cross-origin attribute in HTML5?
• Rotate HTML5 Canvas around the current origin
• What is the usage of the cross-origin attribute in HTML5?
• How to fix getImageData() error ‘The canvas has been tainted by cross-origin data’ in HTML?
• How to save HTML5 canvas data to file?
• Cross domain HTML5 iframe issue
• How to save canvas data to file in HTML5?
• Translating HTML5 canvas
• HTML5 Canvas distorted
• HTML5 Canvas Transformation
• HTML5 Canvas Transformation Matrix
• HTML5 Canvas Circle Text
• HTML5 Canvas Degree Symbol
• Composition attribute in HTML5 Canvas?
• HTML5 Canvas Font Size Based on Canvas Size