JSDoc: Interface: draw

The draw object provides methods for drawing to the HTML5 canvas element.

Properties:

Name	Type	Description
`context`	object	Reference to the canvas 2dcontext. Populated during `MC.init()`

Source:

MC.js, line 717

Methods

(static) array(centre, pointsArray, fillColor, borderColoropt, edgeWidthopt)

Draws a closed shape using an array of points relative to its centre
N.B. Alpha (transparency) is only supported via a MC.Color parameter
1 - either an MC.Color object or an HTML5 color name can be used as a Color
2 - Omission of borderColor and edgeWidth parameters results in a filled shape (with no border)

Parameters:

Name	Type	Attributes	Default	Description
`centre`	MC.Point			Draw centre of the shape
`pointsArray`	Array			Array of draw Points relative to the draw centre
`fillColor`	MC.Color \| string \| null			Shape fill color (1). `null` results in an non-filled shape
`borderColor`	MC.Color \| string	<optional>		Shape border line color (1)(2).
`edgeWidth`	Number	<optional>	1	Shape border line width (2)

Source:

MC.js, line 950

(static) circle(centre, radius, fillColor, borderColoropt, edgeWidthopt)

Draws a Circle
N.B. Alpha (transparency) is only supported via a MC.Color parameter
1 - either an MC.Color object or an HTML5 color name can be used as a Color
2 - Omission of borderColor and edgeWidth parameters results in a filled circle (with no border)

Parameters:

Name	Type	Attributes	Default	Description
`centre`	MC.Point			Circle centre
`radius`	Number			Circle Radius
`fillColor`	MC.Color \| string \| null			Circle fill color (1). `null` results in an non-filled circle
`borderColor`	MC.Color \| string	<optional>		Circle border line color (1)(2).
`edgeWidth`	Number	<optional>	0	Circle border line width (2)

Source:

MC.js, line 818

(static) clearCanvas(color)

Clears the canvas by filling it with a single color.
1 - either an MC.Color object or an HTML5 color name can be used as a Color

Parameters:

Name	Type	Description
`color`	MC.Color \| string	Desired canvas color (1)

Source:

MC.js, line 725

(static) clearInBounds(color)

Fills the canvas area defined as "inBounds" with a single color.
See game.setBounds() for more details
1 - either an MC.Color object or an HTML5 color name can be used as a Color

Parameters:

Name	Type	Description
`color`	MC.Color \| string	Desired canvas color (1)

Source:

MC.js, line 739

(static) clearOutBounds(color)

Fills the canvas area NOT defined as "inBounds" with a single color.
See game.setBounds() for more details
1 - either an MC.Color object or an HTML5 color name can be used as a Color

Parameters:

Name	Type	Description
`color`	MC.Color \| string	Desired canvas color (1)

Source:

MC.js, line 753

(static) d6(centre, size, value, dieColor, pipColor)

Draws a 6 sided dice with the designated value
N.B. this is somewhat intensive method and is only recommended for when caught short without a dice image file !
N.B. Alpha (transparency) is only supported via a MC.Color parameter
1 - either an MC.Color object or an HTML5 color name can be used as a Color

Parameters:

Name	Type	Description
`centre`	MC.Point	Centre of the dice
`size`	Number	Height and width of the dice
`value`	Number	Dice value (clamped to 1-6)
`dieColor`	MC.Color \| string	Dice color (1)
`pipColor`	MC.Color \| string	Color of dice pips (1)

Source:

MC.js, line 1099

(static) line(from, to, color, widthopt)

Draws a line from one Point to another
N.B. Alpha (transparency) is only supported via a MC.Color parameter
1 - either an MC.Color object or an HTML5 color name can be used as a Color

Parameters:

Name	Type	Attributes	Default	Description
`from`	MC.Point			Line start point
`to`	MC.Point			Line finish point
`color`	MC.Color \| string			Line color (1)
`width`	Number	<optional>	1	Desired Line width

Source:

MC.js, line 773

(static) loadWarning(position)

Displays a warning marker (a 20x20 grey square with a red cross)
Used to indicate an Image() that is not loaded

Parameters:

Name	Type	Description
`position`	MC.Point	Canvas location for the centre of the marker

Source:

MC.js, line 1079

(static) picture(image, centre, angle, widthopt, heightopt, startopt, finishopt)

Draws an image on the canvas
This method mirrors (but does modify) a native canvas API call (specifically context.drawImage()) with the addition of an angle parameter
N.B. this method requires EXACTLY the first 3,5 or all 7 parameters.
(1) Only using (image,centre,angle) the image is drawn at 1:1 scale, centred and rotated about the centre point
(2) Adding the width,height pair scales the image to the appropriate size (in pixels)
(3) Adding the start,finish pair clips the image to a rectangle defined by start (top left corner) and finish (bottom right hand corner). Essential for using sprite sheets.
(4) If any start or finish parameter is less or equal to 1, then that ratio of the native image width/height will be applied.
If a Gray Box with Red cross appears, then this method has not been called and the Picture object has drawn a Placeholder to represent an image that has not loaded.

Parameters:

Name	Type	Attributes	Description
`image`	Image		The JS `Image()` to be drawn (1)
`centre`	MC.Point		Canvas location of the centre of the image (1)
`angle`	Number		Angle (degrees) the image is to be rotated about the centre. 0 (zero) = no rotation (1)
`width`	Number	<optional>	Width image is to be displayed with (before any rotation). If used then `height` must be specified (2)
`height`	Number	<optional>	As per width, but image display height in pixels (2)
`start`	MC.Point	<optional>	For displaying only a section of the image, start is a point representing the top left coordinates of the section ot be displayed. If `start` is specified then `finish` has to be too (3)(4)
`finish`	MC.Point	<optional>	As per `start` above, except this is the bottom right of the selection to be displayed (3)(4)

Source:

MC.js, line 1041

(static) poly(centre, sides, radius, angle, fillColor, borderColoropt, edgeWidthopt)

Draws a regular polygon
N.B. Alpha (transparency) is only supported via a MC.Color parameter
1 - either an MC.Color object or an HTML5 color name can be used as a Color
2 - Omission of borderColor and edgeWidth parameters results in a filled polygon (with no border)

Parameters:

Name	Type	Attributes	Default	Description
`centre`	MC.Point			Draw centre of the shape
`sides`	Number			Number of sides
`radius`	Number			Distance from centre to each vertex
`angle`	Number			In degrees (clockwise), 0 = first vertex drawn to the right of centre, 90 = below centre, etc
`fillColor`	MC.Color \| string \| null			Shape fill color (1). `null` results in an non-filled polygon
`borderColor`	MC.Color \| string	<optional>		Shape border line color (1)(2).
`edgeWidth`	Number	<optional>	1	Shape border line width (2)

Source:

MC.js, line 999

(static) polyLine(pointsArray, color, widthopt)

Draws a line through a series of Points
N.B. Alpha (transparency) is only supported via a MC.Color parameter
1 - either an MC.Color object or an HTML5 color name can be used as a Color

Parameters:

Name	Type	Attributes	Default	Description
`pointsArray`	Array			Array of `Point`
`color`	MC.Color \| string			Line color (1)
`width`	Number	<optional>	1	Desired Line width

Source:

MC.js, line 799

(static) rect(centre, width, height, angle, fillColor, borderColoropt, edgeWidthopt)

Draw an angled rectangle
N.B. See Draw.rectBasic() for a non-rotated rectangle
N.B. Alpha (transparency) is only supported via a MC.Color parameter
1 - either an MC.Color object or an HTML5 color name can be used as a Color
2 - Omission of borderColor and edgeWidth parameters results in a filled rectangle (with no border)

Parameters:

Name	Type	Attributes	Default	Description
`centre`	MC.Point			Rectangle centre
`width`	Number			Rectangle width
`height`	Number			Rectangle height
`angle`	Number			Draw angle (degrees)
`fillColor`	MC.Color \| string \| null			Rectangle fill color (1). `null` results in an non-filled rectangle
`borderColor`	MC.Color \| string	<optional>		Rectangle border line color (1)(2).
`edgeWidth`	Number	<optional>	0	Rectangle border line width (2)

Source:

MC.js, line 861

(static) rectBasic(centre, width, height, fillColor, borderColoropt, edgeWidthopt)

Draws an axis-aligned rectangle.
This method is slightly quicker than Draw.rect()
N.B. Alpha (transparency) is only supported via a MC.Color parameter
1 - either an MC.Color object or an HTML5 color name can be used as a Color
2 - Omission of borderColor and edgeWidth parameters results in a filled rectangle (with no border)

Parameters:

Name	Type	Attributes	Default	Description
`centre`	MC.Point			Rectangle centre
`width`	Number			Rectangle width
`height`	Number			Rectangle height
`fillColor`	MC.Color \| string \| null			Rectangle fill color (1). `null` results in an non-filled rectangle
`borderColor`	MC.Color \| string	<optional>		Rectangle border line color (1)(2).
`edgeWidth`	number	<optional>	1	Rectangle border line width (2)

Source:

MC.js, line 909

(static) star(centre, points, OuterRadius, InnerRadius, angle, fillColor, borderColoropt, edgeWidthopt)

Draws a regular star
N.B. Alpha (transparency) is only supported via a MC.Color parameter
1 - either an MC.Color object or an HTML5 color name can be used as a Color
2 - Omission of borderColor and edgeWidth parameters results in a filled star (with no border)

Parameters:

Name	Type	Attributes	Default	Description
`centre`	MC.Point			Draw centre of the star
`points`	Number			Number of points
`OuterRadius`	Number			Distance from centre to each point
`InnerRadius`	Number			Distance from centre to each inner point
`angle`	Number			In degrees (clockwise), 0 = first vertex drawn to the right of centre, 90 = below centre, etc
`fillColor`	MC.Color \| string \| null			Shape fill color (1). `null` results in an non-filled star
`borderColor`	MC.Color \| string	<optional>		Shape border line color (1)(2).
`edgeWidth`	Number	<optional>	1	Shape border line width (2)

Source:

MC.js, line 1018

(static) text(text, position, typefaceopt)

Renders text to the canvas
All such text is drawn with the bottom left corner of the text appearing at the screen coordinates defined by the position MC.Point
Web Safe Fonts Use these to ensure multi-browser support
Arial, Helvetica, Time New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond, Bookman, Comic Sans MS, Trebuchet MS,Arial Black, Impact

Parameters:

Name	Type	Attributes	Default	Description
`text`	String			The text string to be rendered
`position`	MC.Point			Screen coordinates of the bottom left of the text
`typeface`	MC.Typeface \| MC.Color \| String	<optional>	MC.game.text	Desired Typeface (font, size and color) .. otherwise `MC.game.text` is used OR if a Color object is used the `MC.game.text` default font and size will be used with the desired color OR a HTML5 color string name can be used instead (with `MC.game.text defined font and size)`

Source:

MC.js, line 1181

Example

var myTypeface = new MC.Typeface("Comic Sans MS",25,MC.utils.randomColor());
var pos = new MC.Point(100,120);

MC.draw.text("Hello, World", pos, myTypeface);

(static) textFit(text, width, height, font) → {Object}

Uses the HTML5 canvas method of measureText() to establish the best, centralised, fit for a piece of text in a box
Used internally by the MC.ConBox object

Parameters:

Name	Type	Description
`text`	String	to be fitted
`width`	Number	of the box
`height`	Number	of the box
`font`	String	font to be used in the text fit

Source:

MC.js, line 1216

Returns:

An Object comprising of {offset: {MC.Point}, size : {Number}}

Type: Object