([Optional]stringtype,[Variadic]anyargs)ObjectgetContext(stringcontextId)2DContextAttributesNameTypecanvasHTMLCanvasObject[readonly]MethodsReturnNamevoidsave()voidrestore()TransformationMethodsReturnNamevoidscale(floatx,floaty)voidrotate(floatangle)voidtranslate(floatx,floaty)voidtransform(floatm11,floatm12,floatm21,floatm22,floatdx,floatdy)voidsetTransform(floatm11,floatm12,floatm21,floatm22,floatdx,floatdy)ImagedrawingMethodsReturnNamevoiddrawImage(Objectimage,floatdx,floatdy,[Optional]floatdw,floatdh)Argument"image"canbeoftypeHTMLImageElement,HTMLCanvasElementorHTMLVideoElementvoiddrawImage(Objectimage,floatsx,floatsy,floatsw,floatsh,floatdx,floatdy,floatdw,floatdh)CompositingAttributesNameTypeDefaultglobalAlphafloat1.0globalCompositeOperationstringsource-overSupportsanyofthefollowingvalues:source-oversource-insource-outsource-atopdestination-overdestination-indestination-outdestination-atoplightercopyxorLinestylesAttributesNameTypeDefaultlineWidthfloat1.0lineCapstringbuttSupportsanyofthefollowingvalues:buttroundsquarelineJoinstringmiterSupportsanyofthefollowingvalues:roundbevelmitermiterLimitfloat10HTML5CanvasCheatSheetv1.1Colors,stylesandshadowsAttributesNameTypeDefaultstrokeStyleanyblackfillStyleanyblackshadowOffsetXfloat0.0shadowOffsetYfloat0.0shadowBlurfloat0.0shadowColorstringtransparentblackMethodsReturnNameCanvasGradientcreateLinearGradient(floatx0,floaty0,floatx1,floaty1)CanvasGradientcreateRadialGradient(floatx0,floaty0,floatr0,floatx1,floaty1,floatr1)CanvasPatterncreatePattern(Objectimage,stringrepetition)Argument"image"canbeoftypeHTMLImageElement,HTMLCanvasElementorHTMLVideoElement"repetition"supportsanyofthefollowingvalues:[repeat(default),repeat-x,repeat-y,no-repeat]CanvasGradientinterfacevoidaddColorStop(floatoffset,stringcolor)CanvasPatterninterfaceNoattributesormethods.PathsMethodsReturnNamevoidbeginPath()voidclosePath()voidfill()voidstroke()voidclip()voidmoveTo(floatx,floaty)voidlineTo(floatx,floaty)voidquadraticCurveTo(floatcpx,floatcpy,floatx,floaty)voidbezierCurveTo(floatcp1x,floatcp1y,floatcp2x,floatcp2y,floatx,floaty)voidarcTo(floatx1,floaty1,floatx2,floaty2,floatradius)voidarc(floatx,floaty,floatradius,floatstartAngle,floatendAngle,booleananticlockwise)voidrect(floatx,floaty,floatw,floath)booleanisPointInPath(floatx,floaty)TextAttributesNameTypeDefaultfontstring10pxsans-seriftextAlignstringstartSupportsanyofthefollowingvalues:[start,end,left,right,center]textBaselinestringalphabeticSupportsanyofthefollowingvalues:[top,hanging,middle,alphabetic,ideographic,bottom]MethodsReturnNamevoidfillText(stringtext,floatx,floaty,[Optional]floatmaxWidth)voidstrokeText(stringtext,floatx,floaty,[Optional]floatmaxWidth)TextMetricsmeasureText(stringtext)TextMetricsinterfacewidthfloat[readonly]RectanglesMethodsReturnNamevoidclearRect(floatx,floaty,floatw,floath)voidfillRect(floatx,floaty,floatw,floath)voidstrokeRect(floatx,floaty,floatw,floath)PixelmanipulationMethodsReturnNameImageDatacreateImageData(floatsw,floatsh)ImageDatacreateImageData(ImageDataimagedata)ImageDatagetImageData(floatsx,floatsy,floatsw,floatsh)voidputImageData(ImageDataimagedata,floatdx,floatdy,[Optional]floatdirtyX,floatdirtyY,floatdirtyWidth,floatdirtyHeight)ImageDatainterfacewidthunsignedlong[readonly]heightunsignedlong[readonly]dataCanvasPixelArray[readonly]CanvasPixelArrayinterfacelengthunsignedlong[readonly]Source:(2009-05-04)