drawgif

A plugin to extend the CanvasRenderingContext2D object by a .drawGIF() method which is not provided by the Web API. Can be used to draw a gif onto the canvas.

Usage no npm install needed!

<script type="module">
  import drawgif from 'https://cdn.skypack.dev/drawgif';
</script>

README

drawGIF

A plugin to extend the CanvasRenderingContext2D object by a .drawGIF() method which is not provided by the Web API. Can be used to draw a gif onto the canvas.

Syntax

in imitation of CanvasRenderingContext2D.drawImage() - Web APIs | MDN

void ctx.drawImage(image, dx, dy, nFrames, repeat);
void ctx.drawImage(image, dx, dy, dWidth, dHeight, nFrames, repeat);
void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight, nFrames, repeat);

Parameters

  • image:
    An element to draw into the context. The specification only allows an image sprite of the desired GIF. Can be generated here.

  • sx Optional:
    The x-axis coordinate of the top left corner of the sub-rectangle of the source GIF to draw into the destination context.

  • sy Optional:
    The y-axis coordinate of the top left corner of the sub-rectangle of the source GIF to draw into the destination context.

  • sWidth Optional:
    The width of the sub-rectangle of the source GIF to draw into the destination context. If not specified, the entire rectangle from the coordinates specified by sx and sy to the bottom-right corner of the GIF is used.

  • sHeight Optional:
    The height of the sub-rectangle of the source GIF to draw into the destination context.

  • dx:
    The x-axis coordinate in the destination canvas at which to place the top-left corner of the source GIF.

  • dy:
    The y-axis coordinate in the destination canvas at which to place the top-left corner of the source GIF.

  • dWidth Optional:
    The width to draw the GIF in the destination canvas. This allows scaling of the drawn GIF. If not specified, the GIF is not scaled in width when drawn.

  • dHeight Optional:
    The height to draw the GIF in the destination canvas. This allows scaling of the drawn GIF. If not specified, the GIF is not scaled in height when drawn.

  • nFrames:
    The number of frames of the source GIF. If not specified, the number is 1.

  • repeat:
    A Boolean which indicates whether the GIF should be repeated. If not specified the value is true.

Exceptions thrown

not implemented yet.