Provided examples don't work in Codepen/JSFiddle due to CORS issues

UNCONFIRMED
Unassigned

Status

Developer Documentation
API: Miscellaneous
P5
normal
UNCONFIRMED
2 years ago
2 years ago

People

(Reporter: massimo.santini, Unassigned)

Tracking

Details

(URL)

(Reporter)

Description

2 years ago
:: Developer Documentation Request

      Request Type: Correction
     Gecko Version: unspecified
 Technical Contact: 

:: Details

The examples provided on https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas don't work once opened with Codepen/JSFiddle due to a security exception 

pen.js:25 Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

This could be fixed setting 

img.crossOrigin = 'Anonymous';

but the current image https://mdn.mozillademos.org/files/5397/rhino.jpg is served by a served not configured with

Access-Control-Allow-Methods:GET
Access-Control-Allow-Origin:*

so that the above fix does not actually work.
You need to log in before you can comment on or make changes to this bug.