JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
examples
LICENSE
README.md
canvasTools.js
canvasTools.min.js

README.md

Javascript Canvas Tools v0.3.2

Offers easy canvas manipulation including filters, adjustments, blending modes.

As seen in use on talentedmrjones.com

Instantiation

<img src="fern.jpg" id="img1" />
<canvas id="cvs" width="100" height="100"></canvas>
<script>
    (function(){
    	// call with ID of canvas as string
        var Canvas = new CanvasTools.Canvas('cvs');
        
        // call with ID of img as string
        var Canvas = new CanvasTools.Canvas('img1');
        
        // or call with element itself
        var Canvas = new CanvasTools.Canvas(document.getElementById('cvs'));
        var Canvas = new CanvasTools.Canvas(document.getElementById('img1'));
        
    }();
</script>

Filters

<canvas id="cvs" width="100" height="100"></canvas>
<script>
    (function(){
        var Canvas = new CanvasTools.Canvas('cvs');
        Canvas.context.fillStyle = '#e6e6e6';
        Canvas.context.fillRect(0,0,100,100);
        Canvas.filter('noiseGray');
    })();
</script>

filter ( filter , [ options , general ] )

  • filter: the name of the filter (e.g: 'grayscale')
  • options: a JSON object containing key:value pairs. Each filter has its own options (see below)
  • general: a JSON object containing key:value pairs for the following options:
    • pre: a function thats runs just before image data is copied. Useful for manipulating canvas with methods like fillRect() or drawImage()
    • post: a function thats runs after filter has been applies. Useful for manipulating canvas with methods like fillRect() or drawImage()

Available filters:

grayscale

The grayscale filter does exactly that: converts color to grayscale.

options defaults:

{
    weighted:true
} 

true: uses a calculation that takes into account the individual color intensities observed by the human eye. ((r * 1.299)+(g * 1.587)+(b * 1.114))/3

false: calculates without any weights. (r+g+b)/3

noiseGray

Applies a random shade of gray to every pixel in the canvas.

options defaults:

{
    "min":0
    ,"max":255
    ,"opacity":.5
}

min: controls the minimum of the random value used in applying the noise pixel. Lower values allow more black.

max: controls the maximum of the random value used in applying the noise pixel. Higher values allow more white.

opacity: a decimal value from 0–1 used to determine the opacity of the grayscale pixel

noiseColor

Applies a specific color to every pixel in the canvas with a random opacity.

options defaults:

{
    "min":0
    ,"max":100
    ,"rgb":[255,0,0]
}

min: controls the minimum of the random opacity

max: controls the maximum of the random opacity

rgb: and array of integer values from 0–255 as [r,g,b]. Specifies the color of the applied pixel.

noiseRandom

Applies a randomly colored pixel to every pixel of the canvas.

options defaults:

{
    opacity:.5
}

opacity: A decimal value from 0-1. Sets the transparency of the colored pixel.

Adjustments

<img src="fern.jpg" id="img1" />
<canvas id="cvs" width="100" height="100"></canvas>
<script>
    (function(){
        var Canvas = new CanvasTools.Canvas('cvs');
        Canvas.context.drawImage(document.getElementById('img1'),0,0);
        Canvas.adjust('levels');
    })();
</script>

adjust ( adjustment , [ options , general ] )

  • adjustment: the name of the adjustment (e.g: 'levels')
  • options: a JSON object containing key:value pairs. Each adjustment has its own options (see below)
  • general: a JSON object containing key:value pairs for the following options:
    • pre: a function thats runs just before image data is copied. Useful for manipulating canvas with methods like fillRect() or drawImage()
    • post: a function thats runs after filter has been applies. Useful for manipulating canvas with methods like fillRect() or drawImage()

Available adjustments:

levels

The levels adjustment functions exactly like Photoshops levels. It accepts a gamma, and minimum input and output levels.

options defaults:

{
    gamma:1
    ,input:{
        min:0,
        max:255
    }
    ,output:{
        min:0,
        max:255
    }
}

gamma: a float value from 0 to 1 representing the overall brightness of the image

input.min: the minimum input level

input.max: the maximum input level

output.min: the minimum output level

output.max: the maximum output level

Blending Modes

Blending modes are designed to function identically to Photoshop. Thanks to Jerry Huxtable for his Java Image Filters. They were of the utmost help in applying the correct equations.

blend ( mode , top , [ alpha , general ] )

blend the top Canvas with the current instance. The calling instance is treated as the underlying (bottom) layer.

  • mode: the name of the blending mode (e.g: 'screen')
  • top: an instance of CanvasTools.Canvas representing the top layer to blend
  • alpha: a float value from 0–1 representing the opacity for the top layer
  • general: a JSON object containing key:value pairs for the following options:
    • pre: a function thats runs just before image data is copied. Useful for manipulating canvas with methods like fillRect() or drawImage()
    • post: a function thats runs after filter has been applies. Useful for manipulating canvas with methods like fillRect() or drawImage()

Available blending modes:

  • normal
  • screen
  • multiply
  • linear burn

Miscelaneous

getHistogram ( channel , Canvas )

Generates a histogram of the specified channel, using Canvas as the output canvas.

  • channel may be on of the following values

    • red charts the values of red
    • green charts the values of green
    • blue charts the values of blue
    • rgb charts the values of (red+green+blue)
    • luminosity charts the luminance values of the image (R*.3)+(G*.59)+(B*.11)
  • Canvas is a separate canvas element set at 256x100 used to output the histogram chart (see histogram.html example)