// get element by id
    function id(ide){
        if(isNaN(ide)) console.log("Id must be string !");
        else{ return document.getElementById(ide)}
    }
    // console.log
    function log(any){
        console.log(""+any);
    }
    // creat element
    function creat(tag){
        if(isNaN(tag)) console.log("Tag must be string !");
        else{ return document.createElement(tag); }
    }

    // creat the canvas
    let canvas = document.createElement("canvas");
    // set the context
    let ctx = canvas.getContext("2d");
    ctx.clearRect(0,0,canvas.width,canvas.height);
    // set size of the canvas
    canvas.setAttribute("width","500px");
    canvas.setAttribute("height","500px");
    // add border
    canvas.style.borderStyle = "solid";
    // show the canvas on body
    document.body.appendChild(canvas);
    // display the image
    let img = new Image();
    img.onload = ()=>{
        canvas.width  = img.width;
        canvas.height = img.height;
        ctx.drawImage(img,0,0);
    }
    img.src = "m.jpg";

    let imgdata = ctx.getImageData(0,0,canvas.width,canvas.height);
    for (let i = 0; i < imgdata.data.length; i++) {
         imgdata.data[i] = 0;
    }
    ctx.putImageData(imgdata,0,0);

}