rectangle-creator.js

/**
 * Copyright (c) 2016 Kyle Lin
 * This is a script to download an n by n image file of a rectangle.
 */
 
 /**
  * Downloads an image of a filled rectangle.
  * @param {number} width The width of the rectangle.
  * @param {number} height The height of the rectangle.
  * @param {(string|CanvasGradient|CanvasPattern)} fillStyle The fill style of the rectangle.
  * @param {{imageType: string, downloadName: string}} downloadOptions The imageType is the image type to be passed to 
  *     canvas.toDataURL and downloadName is the name of the file to be downloaded (including the extension).
  */
 
function downloadRectImg(width, height, fillStyle, downloadOptions) {
    var canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d'),
        a = document.createElement('a'),
        imageType = downloadOptions.imageType
        downloadName = downloadOptions.downloadName;
    
    canvas.width = width;
    canvas.height = height;
    
    ctx.fillStyle = fillStyle;
    ctx.fillRect(0, 0, width, height);
    
    a.href = canvas.toDataURL(imageType, 1);
    a.download = downloadName;
    
    a.click();
}