CanvasRenderingContext2D object (Windows)

1 out of 1 rated this helpful - Rate this topic

Provides an object that represents a two-dimensional surface that has an origin (0,0) at the upper-left corner, with x-coordinates increasing as you move right and y-coordinates increasing as you move down.

Syntax

JavaScript


var ctx = canvas.getContext("2d");

Members

The CanvasRenderingContext2D object has these types of members:

Methods
Properties

Methods

The CanvasRenderingContext2D object has these methods.

Method	Description
arc	Adds points to a path that represents an arc.
arcTo	Draws an arc of a fixed radius between two tangents that are defined by the current point in a path and two additional points.
beginPath	Resets the current path.
bezierCurveTo	Adds a point to the current subpath by using the specified control points that represent a cubic Bézier curve.
clearRect	Clears the pixels on a CanvasRenderingContext2D object within a given rectangle.
clip	Specifies a new clipping region.
closePath	Closes the current subpath and starts a new subpath that has a start point that is equal to the end of the closed subpath.
createImageData	Returns a CanvasImageData object with the given dimensions in CSS pixels.
createLinearGradient	Creates an object that represents a linear gradient to use in a canvas context.
createPattern	Returns a CanvasPattern object that repeats the specified element in the specified direction.
createRadialGradient	Returns an object that represents a radial or circular gradient to use in a canvas context.
drawImage	Draws a specified image onto a canvas.
fill	Fills subpaths by using the current fill style.
fillRect	Paints a rectangle onto a CanvasRenderingContext2D object by using the current fill style.
fillText	Renders filled text to the canvas by using the current fill style and font.
getImageData	Returns an ICanvasImageData object that represents the pixel data for the specified rectangle on a canvas. Use the data property to get a CanvasPixelArray to manipulate individual pixel data.
isPointInPath	Determines if the specified point is in the current path.
lineTo	Adds a new point to a subpath and connects that point to the last point in the subpath by using a straight line.
measureText	Returns a CanvasTextMetrics object that contains the width of the specified text.
moveTo	Creates a new subpath by using the specified point.
putImageData	Paints the data from a specified CanvasImageData object onto a canvas.
quadraticCurveTo	Adds a point to the current subpath by using the specified control points that represent a quadratic Bézier curve.
rect	Creates a new closed rectangular subpath.
restore	Returns previously saved CanvasRenderingContext2D path state and attributes.
rotate	Rotates the current context coordinates (that is, a transformation matrix).
save	Saves the state of the current context.
scale	Scales the current context by the specified horizontal (x) and vertical (y) factors.
setTransform	Resets the current transformation matrix of the current context back to its default and then multiplies it by the specified matrix.
stroke	Renders the strokes of the current subpath by using the current stroke styles.
strokeRect	Creates an outline of the specified rectangle on a canvas by using the current stroke, line width, and join styles.
strokeText	Renders the specified text at the specified position by using the current font, lineWidth, and strokeStyle property.
transform	Modifies the transformation matrix of the current context.
translate	Specifies values to move the origin point in a canvas.

Properties

The CanvasRenderingContext2D object has these properties.

Property	Description
canvas	Gets a back reference to the canvas object that the current context derives from.
fillStyle	Gets or sets the current style that is used to fill shapes.
font	Gets or sets the current font for the context.
globalAlpha	Gets or sets the current alpha or transparency value that is applied to global composite rendering operations.
globalCompositeOperation	Gets or sets a value that indicates how source images are drawn onto a destination image.
lineCap	Gets or sets the current line cap style.
lineJoin	Gets or sets the type of corner that is created when two lines meet.
lineWidth	Gets or sets the current line width, in pixels.
miterLimit	Gets or sets the maximum allowed ratio between half of the lineWidth value and the miter length.
shadowBlur	Gets or sets the current level of blur that is applied to shadows.
shadowColor	Gets or sets the color to use for shadows.
shadowOffsetX	Gets or sets the horizontal distance of a shadow from a shape.
shadowOffsetY	Gets or sets the vertical distance of a shadow from a shape.
strokeStyle	Gets or sets the current style that is used for strokes of shapes.
textAlign	Gets or sets the current anchor point or alignment settings for text in the current context.
textBaseline	Gets or sets the current settings for the font baseline alignment.

Standards information

HTML Canvas 2D Context, Section 1

Remarks

The CanvasRenderingContext2D object provides most of the drawing methods and properties that are used with the canvas object. Use getContext method to get a context object for a canvas.

Note A canvas object only supports one context. Additional calls to getContext this object return the same context.

Examples

This examples uses the CanvasRenderingContext2D object to display three rectangles.

HTML


<html>
<head>
    <title>Canvas test</title>
    <script type="text/javascript">
      function draw() {
          var canvas = document.getElementById("myCanvas");
          //  if the canvas element exists 
          if (canvas.getContext) {
              // Draw some rectangles with different color values
              var ctx = canvas.getContext("2d");
              ctx.fillStyle = "red";
              ctx.fillRect(5, 5, 100, 100);
              ctx.fillStyle = "rgba(0,50,200,0.5)";
              ctx.fillRect(55, 55, 100, 100);
              ctx.fillStyle = "rgba(0,255,10,0.5)";
              ctx.fillRect(100, 100, 100, 100);                    
          }
        }
    </script>
</head>
<body onload = "draw();">
    <canvas id="myCanvas"" width="300" height="300" >
       Canvas is not supported on this browser or in this mode
    </canvas>
</body>
</html>

Build date: 11/28/2012

Did you find this helpful? Yes No

Not accurate

Not enough depth

Need more code examples

(1500 characters remaining)