AScanvas library is developed, maintained and freely distributed by altersoftware.IT.
AScanvas is not an automagic tool providing charts automagically from an array.
It’s rather intended for those who want to easily create charts by processing data, but want to be fully in control of it.
The library is also considerably lighter than any other automagic framework.
Being light, this library loads and run lightspeed fast - try to reload this page!
It is also very clean and safe: only the “AScanvas” object is used, unless already defined.
All of the improvements are defined by extending CanvasRenderingContext2D prototype.
Last but not least, this library works side by side, line by line, together with ordinary canvas’ methods, in the same script.
It’s not necessary to abstract from canvas’ javascript; AScanvas simply improves it, and makes it much easier in many cases.
An example:
Width: — Heigth:
AScanvas will not add average line, nor value, nor tendency line.
It will not decide automatically the maximun size of bars, or the style of the grid, or whatever about chart title.
All of such task are defined by you, on the other hand AScanvas will support you by providing very convenient tools to approach 2D canvas.
It’s released licensed under the Creative Commons Attribution 3.0 License, which means you can:
It’s a Javascript library, doesn’t fringe SOP. To use it simply add to your page:
<script type="text/javascript" src="https://cdn.altersoftware.org/js-as-canvas/canvas.js" charset="utf-8"></script>
This links the latest version. To link a specific (frozen) version, e.g. “1.0”, use:
<script type="text/javascript" src="https://cdn.altersoftware.org/js-as-canvas/1.0.js" charset="utf-8"></script>
AScanvas provides the 2D context of the HTML5 canvas object with many additional methods.
AScanvas provides extensions to [canvasObject].getContext("2d") prototype.
Additional methods can be of two types:
Index of contents
Methods added to CanvasRenderingContext2D object
- _circle, draw a circle on canvas
- _clear, clear a rectangle on canvas
- _font, a new font object
- _hbar, draw an Horizontal Bar for charts
- _line, draw a Line
- _softhcurve, draw a curve horizontally softened
- _square, draw a square (or a rectangle) on canvas
- _text, type a Text
- _vbar, draw a Vertical Bar for charts
Macro methods added to CanvasRenderingContext2D object
- __clear, clear the canvas
- __reset, clear the canvas and reset titles/clicks
- __xgrid, vertical grid for X axle
- __ygrid, horizontal grid for Y axle
Miscellanea
Creates a new instance of a _circle object, and returns a reference to the created object.
Syntax
CanvasRenderingContext2D._circle( center-x*, center-y*, radius-x*, radius-y )
or:
new AScanvas.circle( CanvasRenderingContext2D*, center-x*, center-y*, radius-x*, radius-y )
Parameters
- center-x, Size, mandatory.
X coordinate of center in number of pixels (from the left side of the canvas).- center-y, Size, mandatory.
Y coordinate of center in number of pixels (from the top side of the canvas).- radius-x, Size, mandatory.
The horizontal radius of the circle.- radius-y, Size, optional.
The vertical radius of the circle, defaults to radius-x.Methods
The following methods can be used on the returned _circle object.
Every method —but draw()— returns again a reference to the _circle object.
- border( borderSize*, borderColor )
Style of circle border, if any.
borderSize is a mandatory value, e.g.: 1 for 1 px width.
borderColor is an optional string.
This method is useless unless stroke() in invoked later on on the object.- color( fillColor* )
Color of circle inner area, if any.
If 3 or more parameters are passed acts like gradient().
Also the form: color('angle|color1|color2|…|colorN') defines a gradient.
This method is useless unless fill() in invoked later on on the object.- draw()
Actually draw the circle.
This is the last method invoked, the only that doesn’t return the object.
Once applied, no more methods are allowed on the _circle object.- fill( fillColor )
Actually fill circle inner area.
Fill style can be defined in advance with color() or gradient(), or specified here.
Parameter(s), if any, follow the same rules of color().- gradient( gradientAngle*, color1*, color2*, …, colorN )
Color of circle inner area, if any.
Defines a gradient for circle inner area, using 2 or more color steps.
The gradient will follow the mandatory clockwise angle, left to right.
Angle 0 (or '0°') means horizontal, an angle value of 'radial' creates a radial gradient.
gradient() can also be invoked passing as a single parameter a canvas gradient object already created elsewhere.
This method is useless unless fill() in invoked later on on the object.- rotate( rotationAngle* )
The angle of rotation of the circle (or ellipse), real or string.
Defaults to 0 (horizontal, no rotation).
Don’t forget to apply rotate() before whatever fill or border operation.- shadow( xSize*, ySize, blurSize, shadowColor )
xSize, mandatory, is X offset of the shadow.
ySize, optional, is Y offset of the shadow. Defaults to xSize
blurSize, optional, is the blur size of shadow. Defaults to ( xSize + ySize ) / 2.
shadowColor, optional, is the color of the shadow. Defaults to AScanvas.defaults.shadowColor ('rgba(0,0,0,.5)').- stroke( borderSize, borderColor )
Draw the border of the circle.
borderSize and borderColor can be defined in advance with width() or border(), or specified here.- width( borderSize* )
Width of circle border, if any.
borderSize is a mandatory value, e.g.: 1 for 1 px width.
This method is useless unless stroke() in invoked later on on the object.Properties
- context
The context, a reference to the CanvasRenderingContext2D object.Example
Creates a new instance of a _clear (clear rectangle) object, and returns a reference to the created object.
Syntax
CanvasRenderingContext2D._clear(starting-x, starting-y )
or:
new AScanvas.clear( CanvasRenderingContext2D*, starting-x, starting-y )
Parameters
- starting-x, Size, optional, defaults to 0.
The number of pixels (from the left side of the canvas) where the rectangle should start from.- starting-y, Size, optional, defaults to 0.
The number of pixels (from the top side of the canvas) where the rectangle should start from.Methods
The following methods can be used on the returned _clear object.
Every method —but draw()— returns again a reference to the _clear object.
- draw()
Actually clear the rectangle.
This is the last method invoked, the only that doesn’t return the object.
Once applied, no more methods are allowed on the _clear object.- height( heightSize* )
The height of the rectangle, defaults to canvas height.- rotate( rotationAngle* )
The angle of rotation of the rectangle, real or string.
Defaults to 0 (horizontal, no rotation).- scale( xFloat*, yFloat )
Scale widht and height appearance, according to passed parameters (1 = actual size).
Beware that the behavior of scale() before or after rotate() is quite different.- size( widthSize*, heightSize )
The size of the rectangle.
heightSize defaults to widthSize.- width( widthSize* )
The width of the rectangle, defaults to canvas width.Properties
- context
The context, a reference to the CanvasRenderingContext2D object.Example
Creates a new instance of a _font object, and returns a reference to the created object.
Can be used inside other objects methods, where a font is required, or to set canvas default font.
Can also be useful to define a kind of style in a variable, to be used later on.
Syntax
CanvasRenderingContext2D._font( font-string )
or:
new AScanvas.font( CanvasRenderingContext2D*, font-string )
Parameters
- font-string, fontString, optional.
Initial properties of the font, overriding current canvas font properties.Methods
The following methods can be used on the returned _font object.
Every method —but draw() and toString()— returns again a reference to the _font object.
- bold()
Sets bold, shortcut for weight('bold').- draw()
Sets this canvas default font to the current font from now on, and doesn’t return the font itself.- family( familyNameString* )
Sets family name, e.g.: 'Verdana', 'Times New Roman', 'sans-serif'.- fromString( fontString* )
Overrides current overlapping properties by parsing a new font string.- italic()
Sets italic, shortcut for style('italic').- normal()
Sets normal, shortcut for style('normal').weight('normal').variant('normal').- setProperty( propertyNameString*, propertyValue )
Set individual properties of the fontObject property of _font.
Note: passed values aren’t interpolated at all, therefore a size set with setProperty('size',…) could be integer or string, but cannot contain Size expressions.- size( fontSize* )
Sets size, can be integer or string. In any case omit 'px'.- special( specialString* )
Sets special behaviors of the font, overriding every other property.
Allowed values are : 'caption', 'icon', 'menu', 'message-box', 'small-caption', 'status-bar'.
Because special overrides every property, by setting whatever else property it’s deleted from _font.- style( styleString* )
Sets style, can be 'normal', 'italic' or 'oblique'.- toString()
Returns the font in the canvas notation.- variant( variantString* )
Sets variant, can be 'normal' or 'small-caps'.- weight( weightString* )
Sets weight, can be 'normal', 'bold', 'bolder', 'lighter', or a string (or integer) like '100','200', … '900'.Properties
- context
The context, a reference to the CanvasRenderingContext2D object.- fontObject
The object holding actual values of _font properties. Its properties can be:
- family, String
- size, Integer
- special, String
- style, String
- variant, String
- weight, String (or Integer)
Creates a new instance of a _hbar (horizontal bar) object, and returns a reference to the created object.
Syntax
CanvasRenderingContext2D._hbar(starting-y*, bar-height*, bar-width*)
or:
new AScanvas.hbar( CanvasRenderingContext2D*, starting-y*, bar-height*, bar-width*)
Parameters
- starting-y, Size, mandatory.
The number of pixels (from the top side of the canvas) where the bar should start from.
This only defines Y coordinate, while X coordinate is the left side of the canvas itself (unless translated or xoffset used).- bar-height, Size, mandatory.
The height of the new bar, in number of pixels or Size.- bar-width, Size, mandatory.
The width of the new bar, in number of pixels or Size.Methods
The following methods can be used on the returned _hbar object.
Every method —but draw()— returns again a reference to the _hbar object.
- color( barColor* )
The color of the bar. Defaults to no color.
Can be used as: color('barColor1|barColor2' ), in this case defines a gradient.- draw()
Actually draw the _hbar.
This is the last method invoked, the only that doesn’t return the object.
Once applied, no more methods are allowed on the _hbar object.- font( fontString* )
The font for the text.
Defaults to default font — see: Font.- gradient( barColor1*, barColor2* )
The colors for the 3D effect of the bar: side color, center color.
gradient() can also be invoked passing as a single parameter a canvas gradient object already created elsewhere.
- label( value*, fontString )
value, mandatory, is the content of the label.
fontString, optional, string, defines inline labelfont().
The label associated with the vertical bar, on display on its top.
Defaults to no label.- labelfont( fontString* )
The font for the label — if any. Must be set before the label()
Defaults to default font — see: Font.- plaintext( boolean* )
Triggers the creation of a paragraph reporting _hbar’s: “text: label”
Paragraph is dynamically created in DOM at draw() time, and is useful for assistive devices reading the page.
Defaults to false.- text( value*, fontString )
value, mandatory, is the content of the text.
fontString, optional, string, defines inline font().
This text is reported on the right side of the _hbar.
Text will be placed in the free space on the right of the bar, and automatically shrinked if necessary.
While label() is intended to report value, this is for series name.Properties
- context
The context, a reference to the CanvasRenderingContext2D object.Example
Creates a new instance of a _line (Line) object, and returns a reference to the created object.
Syntax
CanvasRenderingContext2D._line( dashInterval )
or:
new AScanvas.line( CanvasRenderingContext2D*, dashInterval )
Parameters
- dashInterval, integer, optional.
If passed sets the value to be used for dash size (in pixel).Methods
The following methods can be used on the returned _line object.
Every method —but draw()— returns again a reference to the _line object.
- begin( xSize*, ySize* )
See: from()- color( lineColor* )
The color of the line. Defaults to current canvas color (strokeStyle property).- dashes( sizeInteger* )
The size of dashes of the line. Can also be set at object creation time.- draw()
Actually draw the _line.
This is the last method invoked, the only that doesn’t return the object.
Once applied, no more methods are allowed on the _line object.- from( xSize*, ySize* )
The originating point of the line.
xSize is the distance from canvas left side.
ySize is the distance from canvas top side.- shadow( xSize*, ySize, blurSize, shadowColor )
xSize, mandatory, is X offset of the shadow.
ySize, optional, is Y offset of the shadow. Defaults to xInteger
blurSize, optional, is the blur size of shadow. Defaults to ( xSize + ySize ) / 2.
shadowColor, optional, is the color of the shadow. Defaults to AScanvas.defaults.shadowColor ('rgba(0,0,0,.5)').- to( xSize*, ySize* )
The next point of the line.
xSize is distance from canvas left side.
ySize is the distance from canvas top side.
In case of a multisegmented line to() can be repeated several times.- width( widthSize* )
The size of line width.Example
Creates a new instance of a _softhcurve (a curve horizontally softened) object, and returns a reference to the created object.
Syntax
CanvasRenderingContext2D._softhcurve( soften )
or:
new AScanvas.softhcurve( CanvasRenderingContext2D*, soften )
Parameters
- soften, real, optional.
If passed sets the default value to be used to soften the curve (a value between 0 and 1).
Individual points can have their own soften parameter passed with from() or to().Methods
The following methods can be used on the returned _softhcurve object.
Every method —but draw()— returns again a reference to the _softhcurve object.
- begin( xSize*, ySize*, softenReal )
See: from()- color( lineColor* )
The color of the line. Defaults to current canvas color (strokeStyle property).- draw()
Actually draw the _line.
This is the last method invoked, the only that doesn’t return the object.
Once applied, no more methods are allowed on the _line object.- from( xSize*, ySize*, softenReal )
The originating point of the line.
xSize is the distance from canvas left side.
ySize is the distance from canvas top side.
softenReal, optional, a value between 0 and 1, sets the horizontal soften for this point.- soften( softenReal* )
softenReal is a value between 0 and 1.
The default soften value from now on.- shadow( xSize*, ySize, blurSize, shadowColor )
xSize, mandatory, is X offset of the shadow.
ySize, optional, is Y offset of the shadow. Defaults to xSize
blurSize, optional, is the blur size of shadow. Defaults to ( xSize + ySize ) / 2.
shadowColor, optional, is the color of the shadow. Defaults to AScanvas.defaults.shadowColor ('rgba(0,0,0,.5)').- to( xSize*, ySize*, softenReal )
The next point of the line.
xSize is distance from canvas left side.
ySize is the distance from canvas top side.
softenReal, optional, a value between 0 and 1, sets the horizontal soften for this point.- width( widthSize* )
The size of line width in pixels.Example
Creates a new instance of a _square object, and returns a reference to the created object.
Syntax
CanvasRenderingContext2D._square( top-x*, top-y*, width*, height )
or:
new AScanvas.square( CanvasRenderingContext2D*, top-x*, top-y*, width*, height )
Parameters
- top-x, Size, mandatory.
X coordinate of top corner in number of pixels (from the left side of the canvas).- top-y, Size, mandatory.
Y coordinate of top corner in number of pixels (from the top side of the canvas).- width, Size, mandatory.
The width of the square or rectangle.- height, Size, optional.
The height radius of the rectangle, defaults to width.Methods
The following methods can be used on the returned _square object.
Every method —but draw()— returns again a reference to the _square object.
- color( fillColor* )
Color of square inner area, if any.
In the form: color('color1|color2') defines a vertical gradient.- draw()
Actually draw the square.
This is the last method invoked, the only that doesn’t return the object.
Once applied, no more methods are allowed on the _square object.- gradient( color1*, color2*, …, colorN )
An alias for gradientv.- gradienth( color1*, color2*, …, colorN )
Horizontal gradient of square.
Defines a gradient for square inner area, using 2 or more color steps.
The gradient goes from left to right.
gradienth() can also be invoked passing as a single parameter a canvas gradient object already created elsewhere.- gradientv( color1*, color2*, …, colorN )
Vertical gradient of square.
Defines a gradient for square inner area, using 2 or more color steps.
The gradient goes from bottom to top.
gradientv() can also be invoked passing as a single parameter a canvas gradient object already created elsewhere.Properties
- context
The context, a reference to the CanvasRenderingContext2D object.Example
Creates a new instance of a _text (Text) object, and returns a reference to the created object.
Syntax
CanvasRenderingContext2D._text( text*, x*, y*, limit )
or:
new AScanvas.text( CanvasRenderingContext2D*, text*, x*, y*, limit )
Parameters
- text, string, mandatory.
The text to be displayed.- x, Size, mandatory.
Initial X position of the text from the left side.- y, Size, mandatory.
Initial Y position of the text from the top side.- limit, Size, optional.
The maximum allowed width for the rendering of the text - see: Size.
Defaults to no limit.Methods
The following methods can be used on the returned _text object.
Every method —but draw()— returns again a reference to the _text object.
Please note that sequence of methods is relevant: if a rotate() is applied between outline() and fill() then the outline won’t be affected by the rotation, while the fill will be.
- align( alignString* )
Text alignment in relation to the x,y originating point.
Allowed values are: 'left', 'center' or 'right'.- border( borderSize*, borderColor )
Style of text border, if any.
borderSize is a mandatory value, e.g.: 1 for 1 px width.
borderColor is an optional string.
This method is useless unless stroke() in invoked later on on the object. See also the more convenient outline().- color( textColor* )
The color that will be used to fill the text. Defaults to no color.- draw()
Actually draw the text.
This is the last method invoked, the only that doesn’t return the object.
Can be used more than once to create similar texts, see the following case.- draw( textString, xSize, ySize )
When method is invoked and parameters are passed, then the passed parameters override original ones.
No parameters are mandatory.- fill( textString, xSize, ySize )
textString, optional, is the text to be rendered; defaults to _text value.
xSize, optional, is the X position of text to be filled; defaults to _text value.
ySize, optional, is the Y position of text to be filled; defaults to _text value.
Fill the text with the defined color.
If this method is not invoked before draw() then text is not filled.
In this case no result will occurr, unless there is some other stuff like outline().
Use fill() as the last method before draw(), in order to avoid that other methods (like outline) can override it.- font( fontString* )
The font for the text.
Defaults to default font — see: Font.- limit( widthSize* )
Maximum allowed space for the text.
Whether the rendering should exceed the limit, it will be shrinked.
Defaults to no limit.
Limit can also be set during _text() object creation.- outline( borderSize*, borderColor )
Combines border() and stroke(), and resets lineWidth properties.
Please note:
- Ensure it’s defined before fill(), if any, otherwise fill will be covered
- Ensure it’s defined after changes (like rotate, align or valign), otherwise it will not reflect such changes
- rotate( rotationAngle* )
The angle of rotation of the text, real or string.
Defaults to 0 (horizontal text, no rotation).- scale( xFloat*, yFloat )
Scale widht and height appearance, according to passed parameters (1 = actual size).
Beware that the behavior of scale() before or after rotate() is quite different.
Once scaled also translate() is affected by new scale.- shadow( xSize*, ySize, blurSize, shadowColor )
xSize, mandatory, is X offset of the shadow.
ySize, optional, is Y offset of the shadow. Defaults to xSize
blurSize, optional, is the blur size of shadow. Defaults to ( xSize + ySize ) / 2.
shadowColor, optional, is the color of the shadow. Defaults to AScanvas.defaults.shadowColor ('rgba(0,0,0,.5)').- stroke( textString, xSize, ySize)
textString, optional, is the text to be rendered; defaults to _text value.
xSize, optional, is the X position of text to be filled; defaults to _text value.
ySize, optional, is the Y position of text to be filled; defaults to _text value.
Draw the stroke around the text. See also outline().- text( valueString* )
Change (from now on) the string to be rendered.- translate( xSize, ySize )
Translates text to be rendered from its original coordinates, by xSize (positive is on the right) and ySize (positive is down) pixels.
“Right” and “down” are affected by previous translation, and rotation.- valign( valignString )
Text vertical alignment in relation to the x,y originating point.
Allowed values are: 'top', 'middle' or 'bottom'.Properties
- context
The context, a reference to the CanvasRenderingContext2D object.Example
Creates a new instance of a _vbar (vertical bar) object, and returns a reference to the created object.
Syntax
CanvasRenderingContext2D._vbar(starting-x, bar-width, bar-height)
Parameters
- starting-x, Size, mandatory.
The distance from the left side of the canvas where the bar should start from - see: Size.
This only defines X coordinate, while Y coordinate is the base of the canvas itself (unless translated).- bar-width, Size, mandatory.
The width of the new bar - see: Size.- bar-height, Size, mandatory.
The height of the new bar - see: Size.Methods
The following methods can be used on the returned _vbar object.
Every method —but draw()— returns again a reference to the _vbar object.
- color( barColor )
The color of the bar. Defaults to no color.
Can be used as: color('barColor1|barColor2' ), in this case defines a gradient.- draw()
Actually draw the _vbar.
This is the last method invoked, the only that doesn’t return the object.
Once applied, no more methods are allowed on the _vbar object.- gradient( barColor1, barColor2 )
The colors for the 3D effect of the bar: side color, center color.
gradient() can also be invoked passing as a single parameter a canvas gradient object already created elsewhere.
- label( value*, fontString )
value, mandatory, is the content of the label.
fontString, optional, string, defines inline labelfont().
The label associated with the vertical bar, on display on its top.
Defaults to no label.- labelfont( string )
The font for the label — if any.
Defaults to default font — see: Font.Properties
- context
The context, a reference to the CanvasRenderingContext2D object.- drawn
Boolean, false, becomes true once draw() method has been invoked.Examples
See the first canvas on the top of this page.
__clear is a macro method to clean the whole canvas, or part of it.
Syntax
CanvasRenderingContext2D.__clear( x0, y0, x1, y1 );
or:
AScanvas.macro.clear.apply( CanvasRenderingContext2D*, [x0, y0, x1, y1] );
or:
AScanvas.macro.clear.call( CanvasRenderingContext2D*, x0, y0, x1, y1 );
Parameters
- x0, Size, optional
Left coordinate of the cleaning area, defaults to 0.- y0, Size, optional
Top coordinate of the cleaning area, defaults to 0.- x1, Size, optional
Right coordinate of the cleaning area, defaults to canvas width.- y1, Size, optional
Bottom coordinate of the cleaning area, defaults to canvas height.Example
__reset is a macro method to clean the whole canvas, reset titles (if any) and clicks (if any).
Syntax
CanvasRenderingContext2D.__reset();
or:
AScanvas.macro.reset.apply( CanvasRenderingContext2D* );
or:
AScanvas.macro.reset.call( CanvasRenderingContext2D* );
This method has no parameters.
__xgrid is a macro method that easily provides a set of lines, a grid of divisions on X axle (vertical lines).
Syntax
CanvasRenderingContext2D.__xgrid( numberOfDivisions*, dashInterval, lineColor );
or:
AScanvas.macro.xgrid.apply( CanvasRenderingContext2D*, [numberOfDivisions*, dashInterval, lineColor] );
or:
AScanvas.macro.xgrid.call( CanvasRenderingContext2D*, numberOfDivisions*, dashInterval, lineColor );
Parameters
- numberOfDivisions, integer, mandatory, is the number of areas that will be created on the canvas. E.g.: the number of vertical bars.
- dashInterval, integer, optional, is the length of dashes in number of pixels, if any. 0 or undefined make no dashes.
- lineColor, string, optional.
Example
__ygrid is a macro method that easily provides a set of lines, a grid of divisions on Y axle (horizontal lines).
Syntax
CanvasRenderingContext2D.__ygrid( numberOfDivisions*, dashInterval, lineColor, offsetTop, offsetRight, offsetBottom, offsetLeft );
or:
AScanvas.macro.ygrid.apply( CanvasRenderingContext2D*, [numberOfDivisions*, dashInterval, lineColor, offsetTop, offsetRight, offsetBottom, offsetLeft] );
or:
AScanvas.macro.ygrid.call( CanvasRenderingContext2D*, numberOfDivisions*, dashInterval, lineColor, offsetTop, offsetRight, offsetBottom, offsetLeft );
Parameters
- numberOfDivisions, integer, mandatory, is the number of areas that will be created on the canvas. E.g.: the number of horizontal bars.
- dashInterval, integer, optional, is the length of dashes in number of pixels, if any. 0 or undefined make no dashes.
- lineColor, string, optional.
- offsetTop, Size, optional.
The offset on the top for the grid, in number of pixels or Size.- offsetRight, Size, optional.
The offset on the right for the grid, in number of pixels or Size.- offsetBottom, Size, optional.
The offset on the bottom for the grid, in number of pixels or Size.- offsetLeft, Size, optional.
The offset on the left for the grid, in number of pixels or Size.Example
In canvas angles are expressed like in Math:
- 0 is horizontal
- π (Math.PI) is 180°, counterclockwise
- - Math.PI / 2 is 90° clockwise
The AScanvas library provides a facility:
- Angle can be a floating point real, an stated above
- Angle can also be expressed as a string like '72°' or '-90°'
Actually the rules to evaluate angle strings are more relaxed:
- Whether the string contains '°' the angle is expressed in degrees (and '°' is removed)
- Eventually the string is evalued, and its result parsed as float.
Therefore the string can contain arithmetic expressions, like '- ( Math.round(15.3) + ( 10 * 3 ) )°'.
If you want to use a javascript variable myvar concatenate it: rotate('-' + myvar + '°')
Once an element has been applied the rotate() method it's the canvas itself that has been translated by rotation.
Apply translate() before rotation, and if you need more translate (e.g. for _text) it could be convenient to rotate() back the element before applying again the translate() method.
In canvas context color can be expressed always as a string, like these:
- '#cc0'
- '#cccc00'
- 'rgb(171,171,0)'
- 'rgba(171,171,0,.8)'
AScanvas provides some default values, they can be overridden by setting their value from local code:
- AScanvas.defaults.label.borderColor ➔ 'rgba(0,0,0,.8)'
- AScanvas.defaults.label.borderWidth ➔ 2
- AScanvas.defaults.label.color ➔ '#fff'
- AScanvas.defaults.label.font ➔ 'normal 10px verdana'
- AScanvas.defaults.shadowColor ➔ 'rgba(0,0,0,.5)'
In canvas context font can be expressed always as a string, like these:
- 'bold 12px Verdana'
- '11px Arial'
- 'bold italic 10px Helvetica'
AScancas provide an easy facility to handle fonts, see the _font object.
Where a font string is required, e.g. in a font() object method, we can use something like:
- .font( _font('bold 18px Verdana').toString() )
- .font( _font('Verdana').size(18).bold().toString() )
- .font( _font().family('Verdana').size(18).bold().toString() )
- .font( _font('bold Verdana').size('.5 * Math.sqrt($w*$h)') )
Using _font its size can be expressed in relation to width and height.
Last but not least, because the _font’s toString() method returns canvas font string, it’s not necessary to invoke always the .toString() method.
Also in CanvasRenderingContext2D context we can use:
- var style1 = _font('bold 18px Verdana').toString();
- var style2 = _font('Verdana').size(18).bold().toString();
- var style3 = _font().family('Verdana').size(18).bold().toString();
- var style4 = _font('bold Verdana').size('.5 * Math.sqrt($w*$h)');
Note that in such cases it could be convenient to use _font’s draw() method.
Later on you can use it:
- style4.draw();
- _text("Foo",10,10).font( style1 ).fill().draw();
X and Y coordinates, as well as width and height values, should be espressend as integer (number of pixels).
The AScanvas library provides a facility: when X, Y, width and height values are expressed, they can be:
- Integer, number of pixels
- String, an artihmetic expression using "$w" and "$h" values (width and height of the canvas).
The string can contain expressions, e.g.: '5 + ( $w - 10 ) * ( $h - 100)'.
$w and $h are replaced with actual canvas width and height, then the expression is evaluated and rounded to integer.
In case of error during evaluation the returned value is 0.
The adoption of Size(s) expressed in relation to $w and $h can actually make your charts resolution independant.
AScanvas canvas.js library is © 2014 by Marco Balestra, altersoftware.it