Extracting Bitmaps

Below, we animate a graphical figure by flipping through an array of bitmap sprites extracted from a single image. Note that createImageBitmap() returns a promise.createImageBitmap() may take as the last parameter an object that sets options for the image's extraction. The available options are:imageOrientation: Specifies whether the image should be presented as is or flipped vertically. Either none (default) or flipY.premultiplyAlpha: Specifies whether the bitmap's color channels should be premultiplied by the alpha channel. One of none, premultiply, or default (default).colorSpaceConversion: Specifies whether the image should be decoded using color space conversion. Either none or default (default). The value default indicates that implementation-specific behavior is used.resizeWidth: A long integer that indicates the output width.resizeHeight: A long integer that indicates the output height.resizeQuality: Specifies the algorithm to be used for resizing the input to match the output dimensions. One of pixelated, low (default), medium, or high.
RESETRUNFULL
<!DOCTYPE html><html>
    <head></head><body><canvas style="height:200px;width:400px;"></canvas>
    <img/>
    <script>
        var canvas = document.querySelector("canvas"),
            ctx = canvas.getContext('2d'),
            image = new Image();
        image.onload = function() {
            var arr = [];
            for (let x=0; x<=340; x+=85)
                for (let y=10; y<=110; y+=100){
                    if (y==110 && x>250) break;
                    arr.push(createImageBitmap(
                                                     image, x, y, 85, 100));
                }
            Promise.all(arr).then(function(sprites) {
                var frame=0;
                function animate(){
                    if (frame==6) frame = 0;
                    ctx.drawImage(sprites[frame], 0, 0);
                    frame++;
                    requestAnimationFrame(animate)
                }
                animate();
                document.querySelector("img").src=image.src;
            });
        }
        image.src = 'doraemon.png';
    </script></body></html>