Question: I'm trying to make a layout with these circular layers in each section of the site, but am having difficulty as it is not a very easy task, can someone give me a light?

![photoshop psd of the future website](https://i.stack.imgur.com/hGSYb.png)

Answer: 
The correct method of setting new image data is to use the set() method:

```
newImgData.data.set(clampedArray);

```
Swapping imageData.data with a different array has always been problematic--maybe because of the hidden cross-domain security safeguards built into canvas.

More reliable is copying each new data element into the imageData.data array: 

<http://jsfiddle.net/m1erickson/s9DA4/>

```
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var WIDTH=canvas.width;
    var HEIGHT=canvas.height;

    var data=[];
    for(var i=0;i<WIDTH*HEIGHT;i++){
        data=data.concat([0,255,0,255]);
    }

    var newImgData=ctx.createImageData(WIDTH,HEIGHT);
    for(var i=0;i<newImgData.data.length;i+=4){
        newImgData.data[i+0]=data[i+0];
        newImgData.data[i+1]=data[i+1];
        newImgData.data[i+2]=data[i+2];
        newImgData.data[i+3]=data[i+3];
    }

    ctx.putImageData(newImgData,0 ,0);

```