{"abstract":[{"type":"text","text":"The "},{"type":"codeVoice","code":"CanvasRenderingContext2D"},{"type":"text","text":" class provides a 2D drawing context for a canvas element. Use the methods of this class to draw on the canvas. To obtain an instance of the "},{"type":"codeVoice","code":"CanvasRenderingContext2D"},{"type":"text","text":", call the "},{"type":"codeVoice","code":"getContext('2d')"},{"type":"text","text":" method on a canvas object. See "},{"type":"reference","isActive":true,"identifier":"devLink-1744220"},{"type":"text","text":" for usage examples."}],"documentVersion":0,"hierarchy":{"paths":[["doc://com.apple.documentation/documentation/technologies","doc://com.apple.documentation/documentation/webkitjs"]]},"identifier":{"url":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d","interfaceLanguage":"data"},"legacy_identifier":1632596,"kind":"symbol","metadata":{"title":"CanvasRenderingContext2D","role":"symbol","roleHeading":"Class","modules":[{"name":"WebKit JS"}],"platforms":[{"name":"Safari Desktop","introducedAt":"10.0","current":"18.0"},{"name":"Safari Mobile","introducedAt":"1.0","current":"18.0"}],"externalID":"cl/CanvasRenderingContext2D","symbolKind":"cl"},"schemaVersion":{"major":0,"minor":3,"patch":0},"sections":[],"variants":[{"traits":[{"interfaceLanguage":"data"}],"paths":["documentation/webkitjs/canvasrenderingcontext2d"]}],"references":{"doc://com.apple.documentation/documentation/webkitjs":{"title":"WebKit JS","identifier":"doc://com.apple.documentation/documentation/webkitjs","url":"/documentation/webkitjs","type":"topic","kind":"symbol","role":"collection"},"devLink-1744220":{"identifier":"devLink-1744220","type":"link","title":"Safari HTML5 Canvas Guide","url":"https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/HTML-canvas-guide/Introduction/Introduction.html#//apple_ref/doc/uid/TP40010542"},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1632646-clearrect":{"title":"clearRect","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1632646-clearrect","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1632646-clearrect","abstract":[{"type":"text","text":"Clears the specified rectangle to transparent black—RGBa(0,0,0,0)."}]},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1633676-fillrect":{"title":"fillRect","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1633676-fillrect","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1633676-fillrect","abstract":[{"type":"text","text":"Fills a specified rectangle in the current fill color, gradient, or pattern."}]},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1632379-strokerect":{"title":"strokeRect","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1632379-strokerect","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1632379-strokerect","abstract":[{"type":"text","text":"Draws a rectangle using the current stroke color, pattern, or gradient."}]},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1632556-beginpath":{"title":"beginPath","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1632556-beginpath","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1632556-beginpath","abstract":[{"type":"text","text":"Denotes the beginning of new path."}]},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1631003-clip":{"title":"clip","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1631003-clip","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1631003-clip","abstract":[{"type":"text","text":"Constrains the clipping region of the canvas to the current path."}]},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1631233-ispointinpath":{"title":"isPointInPath","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1631233-ispointinpath","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1631233-ispointinpath","abstract":[{"type":"text","text":"Determines whether a specified point is within the area defined by the current path."}]},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1631011-fill":{"title":"fill","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1631011-fill","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1631011-fill","abstract":[{"type":"text","text":"Fills the current path using the current fill color, gradient, or pattern."}]},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1633959-fillstyle":{"title":"fillStyle","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1633959-fillstyle","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1633959-fillstyle","abstract":[{"type":"text","text":"A CSS color, a gradient, or a pattern used to fill shapes and text."}]},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1629505-linecap":{"title":"lineCap","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1629505-linecap","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1629505-linecap","abstract":[{"type":"text","text":"A string specifying the type of end cap to put on lines to be drawn using "},{"type":"codeVoice","code":"lineTo()"},{"type":"text","text":"."}]},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1629229-linejoin":{"title":"lineJoin","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1629229-linejoin","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1629229-linejoin","abstract":[{"type":"text","text":"A string specifying the manner in which line joins are drawn."}]},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1630379-linewidth":{"title":"lineWidth","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1630379-linewidth","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1630379-linewidth","abstract":[{"type":"text","text":"A floating-point number that controls the width of lines and strokes, in pixels."}]},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1631529-miterlimit":{"title":"miterLimit","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1631529-miterlimit","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1631529-miterlimit","abstract":[{"type":"text","text":"A floating-point number that controls the miter limit ratio for mitered line joins."}]},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1634233-stroke":{"title":"stroke","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1634233-stroke","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1634233-stroke","abstract":[{"type":"text","text":"Draws the outline of the current path using the current stroke style and line width."}]},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1634470-strokestyle":{"title":"strokeStyle","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1634470-strokestyle","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1634470-strokestyle","abstract":[{"type":"text","text":"A CSS color, a gradient, or a pattern used to stroke lines and shapes."}]},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1630282-drawimage":{"title":"drawImage","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1630282-drawimage","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1630282-drawimage","abstract":[{"type":"text","text":"Draws the specified image with its upper-left corner at the specified point on the canvas, optionally scaling the image to a specified width and height. Alternatively, draws a specified region of the image, mapped to a specified region of the canvas."}]},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1634243-filltext":{"title":"fillText","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1634243-filltext","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1634243-filltext","abstract":[{"type":"text","text":"Draws a line of text at the specified x,y coordinates, optionally scaled to a specified maximum width."}]},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1632249-font":{"title":"font","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1632249-font","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1632249-font","abstract":[{"type":"text","text":"A string containing font settings, such as the font family, size, and weight."}]},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1631690-measuretext":{"title":"measureText","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1631690-measuretext","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1631690-measuretext","abstract":[{"type":"text","text":"Determines the width of the bounding box required to render the specified text with the current font settings."}]},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1630188-stroketext":{"title":"strokeText","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1630188-stroketext","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1630188-stroketext","abstract":[{"type":"text","text":"Draws a line of text in outline at the specified x,y coordinates, optionally limited to a specified maximum width."}]},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1631811-textalign":{"title":"textAlign","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1631811-textalign","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1631811-textalign","abstract":[{"type":"text","text":"A string that specifies whether text is left-justified, right-justified, or centered."}]},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1629692-textbaseline":{"title":"textBaseline","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1629692-textbaseline","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1629692-textbaseline","abstract":[{"type":"text","text":"A string that specifies how the bounding box aligns vertically relative to the y-coordinate."}]},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1630553-rotate":{"title":"rotate","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1630553-rotate","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1630553-rotate","abstract":[{"type":"text","text":"Rotates the canvas coordinate system."}]},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1631799-scale":{"title":"scale","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1631799-scale","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1631799-scale","abstract":[{"type":"text","text":"Scales the canvas coordinate system horizontally and vertically."}]},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1630015-settransform":{"title":"setTransform","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1630015-settransform","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1630015-settransform","abstract":[{"type":"text","text":"Sets the transformation matrix."}]},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1629911-transform":{"title":"transform","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1629911-transform","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1629911-transform","abstract":[{"type":"text","text":"Transforms the current transformation matrix using another matrix."}]},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1629441-translate":{"title":"translate","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1629441-translate","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1629441-translate","abstract":[{"type":"text","text":"Moves the origin of the canvas coordinate system."}]},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1634183-save":{"title":"save","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1634183-save","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1634183-save","abstract":[{"type":"text","text":"Saves the current context settings on the stack."}]},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1628925-restore":{"title":"restore","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1628925-restore","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1628925-restore","abstract":[{"type":"text","text":"Restores the last saved set of context settings."}]},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1631404-globalalpha":{"title":"globalAlpha","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1631404-globalalpha","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1631404-globalalpha","abstract":[{"type":"text","text":"A floating-point number controlling the degree of opacity for all drawing operations."}]},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1632770-globalcompositeoperation":{"title":"globalCompositeOperation","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1632770-globalcompositeoperation","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1632770-globalcompositeoperation","abstract":[{"type":"text","text":"A string representing the compositing method for drawing operations."}]},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1630205-createlineargradient":{"title":"createLinearGradient","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1630205-createlineargradient","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1630205-createlineargradient","abstract":[{"type":"text","text":"Creates a linear gradient object with a specified start point and a specified end point."}]},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1628866-createpattern":{"title":"createPattern","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1628866-createpattern","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1628866-createpattern","abstract":[{"type":"text","text":"Creates a pattern object using the specified image as a template. The pattern can be specified as repeating horizontally, vertically, both horizontally and vertically (the default), or not at all."}]},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1631480-createradialgradient":{"title":"createRadialGradient","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1631480-createradialgradient","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1631480-createradialgradient","abstract":[{"type":"text","text":"Creates a radial gradient object using the cone defined by the specified starting and ending circles."}]},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1632980-createimagedata":{"title":"createImageData","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1632980-createimagedata","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1632980-createimagedata","abstract":[{"type":"text","text":"Creates an opaque object whose "},{"type":"codeVoice","code":"data"},{"type":"text","text":" property contains a one-dimensional array of pixel values, initialized to transparent black."}]},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1632656-getimagedata":{"title":"getImageData","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1632656-getimagedata","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1632656-getimagedata","abstract":[{"type":"text","text":"Gets an "},{"type":"codeVoice","code":"imageData"},{"type":"text","text":" object containing an RGBa pixel array corresponding to a rectangular area of the canvas."}]},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1633082-putimagedata":{"title":"putImageData","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1633082-putimagedata","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1633082-putimagedata","abstract":[{"type":"text","text":"Blits the contents of an "},{"type":"codeVoice","code":"imageData"},{"type":"text","text":" object to the canvas. Alternatively, blits a specified region of the "},{"type":"codeVoice","code":"imageData"},{"type":"text","text":" object to the canvas."}]},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1634057-clearshadow":{"title":"clearShadow","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1634057-clearshadow","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1634057-clearshadow","abstract":[{"type":"text","text":"Turns shadows off."}]},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1632236-shadowblur":{"title":"shadowBlur","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1632236-shadowblur","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1632236-shadowblur","abstract":[{"type":"text","text":"A floating-point number that controls the degree of Gaussian blur applied to shadows."}]},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1629275-shadowcolor":{"title":"shadowColor","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1629275-shadowcolor","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1629275-shadowcolor","abstract":[{"type":"text","text":"A string that contains the RGBa color value of shadows. "}]},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1632399-shadowoffsetx":{"title":"shadowOffsetX","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1632399-shadowoffsetx","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1632399-shadowoffsetx","abstract":[{"type":"text","text":"A floating-point number that controls the horizontal offset of shadows from the elements casting the shadows."}]},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1633455-shadowoffsety":{"title":"shadowOffsetY","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1633455-shadowoffsety","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1633455-shadowoffsety","abstract":[{"type":"text","text":"A floating-point number that controls the vertical offset of shadows from the elements casting the shadows."}]},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/global_compositing_operation_constants":{"title":"Global Compositing Operation Constants","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/global_compositing_operation_constants","kind":"article","role":"collectionGroup","url":"/documentation/webkitjs/canvasrenderingcontext2d/global_compositing_operation_constants","abstract":[{"type":"text","text":"Constants used to set the "},{"type":"codeVoice","code":"globalCompositeOperation"},{"type":"text","text":" property."}]},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/textbaseline_constants":{"title":"textBaseline Constants","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/textbaseline_constants","kind":"article","role":"collectionGroup","url":"/documentation/webkitjs/canvasrenderingcontext2d/textbaseline_constants","abstract":[{"type":"text","text":"Constants used to set the "},{"type":"codeVoice","code":"textBaseline"},{"type":"text","text":" property that specify the vertical alignment of the bounding box relative to its y-coordinate. "}]},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/textalign_constants":{"title":"textAlign Constants","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/textalign_constants","kind":"article","role":"collectionGroup","url":"/documentation/webkitjs/canvasrenderingcontext2d/textalign_constants","abstract":[{"type":"text","text":"Constants used with the "},{"type":"codeVoice","code":"textAlign"},{"type":"text","text":" property that specify the horizontal alignment of the bounding box relative to its x-coordinate. "}]},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/2871229-canvas":{"title":"canvas","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/2871229-canvas","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/2871229-canvas"},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1629301-direction":{"title":"direction","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1629301-direction","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1629301-direction"},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1777972-imagesmoothingenabled":{"title":"imageSmoothingEnabled","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1777972-imagesmoothingenabled","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1777972-imagesmoothingenabled"},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1777969-imagesmoothingquality":{"title":"imageSmoothingQuality","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1777969-imagesmoothingquality","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1777969-imagesmoothingquality"},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1631841-linedashoffset":{"title":"lineDashOffset","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1631841-linedashoffset","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1631841-linedashoffset"},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1629484-webkitbackingstorepixelratio":{"title":"webkitBackingStorePixelRatio","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1629484-webkitbackingstorepixelratio","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1629484-webkitbackingstorepixelratio"},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1628979-webkitimagesmoothingenabled":{"title":"webkitImageSmoothingEnabled","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1628979-webkitimagesmoothingenabled","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1628979-webkitimagesmoothingenabled"},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1630482-webkitlinedash":{"title":"webkitLineDash","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1630482-webkitlinedash","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1630482-webkitlinedash"},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1630763-webkitlinedashoffset":{"title":"webkitLineDashOffset","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1630763-webkitlinedashoffset","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1630763-webkitlinedashoffset"},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1777821-commit":{"title":"commit","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1777821-commit","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1777821-commit"},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1631353-drawfocusifneeded":{"title":"drawFocusIfNeeded","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1631353-drawfocusifneeded","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1631353-drawfocusifneeded"},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1633575-drawimagefromrect":{"title":"drawImageFromRect","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1633575-drawimagefromrect","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1633575-drawimagefromrect"},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1630019-getlinedash":{"title":"getLineDash","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1630019-getlinedash","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1630019-getlinedash"},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1629025-ispointinstroke":{"title":"isPointInStroke","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1629025-ispointinstroke","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1629025-ispointinstroke"},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/2871273-resettransform":{"title":"resetTransform","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/2871273-resettransform","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/2871273-resettransform"},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1631574-setalpha":{"title":"setAlpha","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1631574-setalpha","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1631574-setalpha"},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1631622-setcompositeoperation":{"title":"setCompositeOperation","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1631622-setcompositeoperation","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1631622-setcompositeoperation"},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1633538-setfillcolor":{"title":"setFillColor","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1633538-setfillcolor","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1633538-setfillcolor"},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1632206-setlinecap":{"title":"setLineCap","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1632206-setlinecap","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1632206-setlinecap"},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1632699-setlinedash":{"title":"setLineDash","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1632699-setlinedash","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1632699-setlinedash"},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1630234-setlinejoin":{"title":"setLineJoin","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1630234-setlinejoin","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1630234-setlinejoin"},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1633380-setlinewidth":{"title":"setLineWidth","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1633380-setlinewidth","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1633380-setlinewidth"},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1633659-setmiterlimit":{"title":"setMiterLimit","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1633659-setmiterlimit","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1633659-setmiterlimit"},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1630005-setshadow":{"title":"setShadow","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1630005-setshadow","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1630005-setshadow"},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1629320-setstrokecolor":{"title":"setStrokeColor","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1629320-setstrokecolor","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1629320-setstrokecolor"},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1633452-webkitgetimagedatahd":{"title":"webkitGetImageDataHD","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1633452-webkitgetimagedatahd","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1633452-webkitgetimagedatahd"},"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1631552-webkitputimagedatahd":{"title":"webkitPutImageDataHD","type":"topic","identifier":"doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1631552-webkitputimagedatahd","kind":"symbol","role":"symbol","url":"/documentation/webkitjs/canvasrenderingcontext2d/1631552-webkitputimagedatahd"},"doc://com.apple.documentation/documentation/technologies":{"type":"topic","identifier":"doc://com.apple.documentation/documentation/technologies","url":"/documentation/technologies","kind":"technologies","title":"Technologies"}},"topicSections":[{"kind":"taskGroup","title":"Drawing Rectangles","identifiers":["doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1632646-clearrect","doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1633676-fillrect","doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1632379-strokerect"],"anchor":"1668337"},{"kind":"taskGroup","title":"Creating Paths (Lines, Curves, Arcs, and Shapes)","identifiers":["doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1632556-beginpath","doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1631003-clip","doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1631233-ispointinpath"],"anchor":"1668410","abstract":[{"type":"text","text":"Paths are made up of line segments, curves, and arcs. A path is drawn when you call the "},{"type":"codeVoice","code":"fill()"},{"type":"text","text":" or "},{"type":"codeVoice","code":"stroke()"},{"type":"text","text":" methods."}]},{"kind":"taskGroup","title":"Filling and Stroking Lines and Paths","identifiers":["doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1631011-fill","doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1633959-fillstyle","doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1629505-linecap","doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1629229-linejoin","doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1630379-linewidth","doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1631529-miterlimit","doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1634233-stroke","doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1634470-strokestyle"],"anchor":"1668563"},{"kind":"taskGroup","title":"Drawing Images","identifiers":["doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1630282-drawimage"],"anchor":"1668680"},{"kind":"taskGroup","title":"Drawing Text","identifiers":["doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1634243-filltext","doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1632249-font","doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1631690-measuretext","doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1630188-stroketext","doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1631811-textalign","doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1629692-textbaseline"],"anchor":"1668708"},{"kind":"taskGroup","title":"Changing the Coordinate System","identifiers":["doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1630553-rotate","doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1631799-scale","doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1630015-settransform","doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1629911-transform","doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1629441-translate"],"anchor":"1668785","abstract":[{"type":"text","text":"The current transformation matrix is applied to the canvas coordinate system. These methods modify the current transformation matrix."}]},{"kind":"taskGroup","title":"Saving and Restoring Settings","identifiers":["doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1634183-save","doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1628925-restore"],"anchor":"1668860"},{"kind":"taskGroup","title":"Compositing","identifiers":["doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1631404-globalalpha","doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1632770-globalcompositeoperation"],"anchor":"1668906"},{"kind":"taskGroup","title":"Creating Gradients and Patterns","identifiers":["doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1630205-createlineargradient","doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1628866-createpattern","doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1631480-createradialgradient"],"anchor":"1668954","abstract":[{"type":"text","text":"Gradients or patterns can be used instead of colors as the stroke or fill style."}]},{"kind":"taskGroup","title":"Manipulating Pixels","identifiers":["doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1632980-createimagedata","doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1632656-getimagedata","doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1633082-putimagedata"],"anchor":"1668997"},{"kind":"taskGroup","title":"Working with Shadows","identifiers":["doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1634057-clearshadow","doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1632236-shadowblur","doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1629275-shadowcolor","doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1632399-shadowoffsetx","doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1633455-shadowoffsety"],"anchor":"1669046","abstract":[{"type":"text","text":"If shadows are enabled, all "},{"type":"codeVoice","code":"stroke()"},{"type":"text","text":", "},{"type":"codeVoice","code":"fill()"},{"type":"text","text":", and "},{"type":"codeVoice","code":"drawImage()"},{"type":"text","text":" operations include a shadow. Shadows need not be turned on or off using a method. You can enable or disable shadows by setting the "},{"type":"codeVoice","code":"shadowColor"},{"type":"text","text":", "},{"type":"codeVoice","code":"shadowBlur"},{"type":"text","text":", "},{"type":"codeVoice","code":"shadowOffsetX"},{"type":"text","text":", and "},{"type":"codeVoice","code":"shadowOffsetY"},{"type":"text","text":" properties. "}]},{"kind":"taskGroup","title":"Constants","identifiers":["doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/global_compositing_operation_constants","doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/textbaseline_constants","doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/textalign_constants"],"anchor":"1679167"},{"kind":"taskGroup","title":"Instance Properties","identifiers":["doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/2871229-canvas","doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1629301-direction","doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1777972-imagesmoothingenabled","doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1777969-imagesmoothingquality","doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1631841-linedashoffset","doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1629484-webkitbackingstorepixelratio","doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1628979-webkitimagesmoothingenabled","doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1630482-webkitlinedash","doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1630763-webkitlinedashoffset"],"anchor":"2857863"},{"kind":"taskGroup","title":"Instance Methods","identifiers":["doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1777821-commit","doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1631353-drawfocusifneeded","doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1633575-drawimagefromrect","doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1630019-getlinedash","doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1629025-ispointinstroke","doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/2871273-resettransform","doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1631574-setalpha","doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1631622-setcompositeoperation","doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1633538-setfillcolor","doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1632206-setlinecap","doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1632699-setlinedash","doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1630234-setlinejoin","doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1633380-setlinewidth","doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1633659-setmiterlimit","doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1630005-setshadow","doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1629320-setstrokecolor","doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1633452-webkitgetimagedatahd","doc://com.apple.documentation/documentation/webkitjs/canvasrenderingcontext2d/1631552-webkitputimagedatahd"],"anchor":"2857864"}],"primaryContentSections":[{"kind":"declarations","declarations":[{"languages":["data"],"tokens":[{"kind":"keyword","text":"interface"},{"kind":"text","text":" "},{"kind":"identifier","text":"CanvasRenderingContext2D"}],"platforms":["Safari Desktop","Safari Mobile"]}]}],"legalNotices":{"copyright":"Copyright © 2026 Apple Inc. All rights reserved.","termsOfUse":"https://www.apple.com/legal/internet-services/terms/site.html","privacyPolicy":"https://www.apple.com/privacy/privacy-policy"}}