https://konvajs.org/assets/js/b1f0e1b4.74ba35d5.js

1"use strict";(globalThis.webpackChunkkonva_site_2||=[]).push([[2870],{7299(e,n,t){t.r(n),t.d(n,{assets:()=>o,contentTitle:()=>s,default:()=>h,frontMatter:()=>r,metadata:()=>a,toc:()=>c});const a=JSON.parse('{"id":"api/Konva.Context","title":"Konva.Context","description":"Konva wrapper around native 2d canvas context. It has almost the same API of 2d context with some additional functions. With core Konva shapes you don\'t need to use this object. But you will use it if you want to create a custom shape or a custom hit regions.","source":"@site/content/api/Konva.Context.mdx","sourceDirName":"api","slug":"/api/Konva.Context.html","permalink":"/api/Konva.Context.html","draft":false,"unlisted":false,"editUrl":"https://github.com/konvajs/site/edit/master/content/api/Konva.Context.mdx","tags":[],"version":"current","frontMatter":{"title":"Konva.Context","sidebar_label":"Context","slug":"/api/Konva.Context.html","description":"Konva wrapper around native 2d canvas context. It has almost the same API of 2d context with some additional functions. With core Konva shapes you don\'t need to use this object. But you will use it if you want to create a custom shape or a custom hit regions."},"sidebar":"apiSidebar","previous":{"title":"Container","permalink":"/api/Konva.Container.html"},"next":{"title":"Easings","permalink":"/api/Konva.Easings.html"}}');var i=t(4848),l=t(8453);const r={title:"Konva.Context",sidebar_label:"Context",slug:"/api/Konva.Context.html",description:"Konva wrapper around native 2d canvas context. It has almost the same API of 2d context with some additional functions. With core Konva shapes you don't need to use this object. But you will use it if you want to create a custom shape or a custom hit regions."},s="Context",o={},c=[{value:"Own Methods",id:"own-methods",level:2},{value:"fillShape(shape)",id:"fillShape",level:3},{value:"strokeShape(shape)",id:"strokeShape",level:3},{value:"fillStrokeShape(shape)",id:"fillStrokeShape",level:3},{value:"reset()",id:"reset",level:3},{value:"getCanvas()",id:"getCanvas",level:3},{value:"clear(bounds)",id:"clear",level:3},{value:"arc()",id:"arc",level:3},{value:"arcTo()",id:"arcTo",level:3},{value:"beginPath()",id:"beginPath",level:3},{value:"bezierCurveTo()",id:"bezierCurveTo",level:3},{value:"clearRect()",id:"clearRect",level:3},{value:"closePath()",id:"closePath",level:3},{value:"createImageData()",id:"createImageData",level:3},{value:"createLinearGradient()",id:"createLinearGradient",level:3},{value:"createPattern()",id:"createPattern",level:3},{value:"createRadialGradient()",id:"createRadialGradient",level:3},{value:"drawImage()",id:"drawImage",level:3},{value:"ellipse()",id:"ellipse",level:3},{value:"isPointInPath()",id:"isPointInPath",level:3},{value:"fillRect()",id:"fillRect",level:3},{value:"strokeRect()",id:"strokeRect",level:3},{value:"fillText()",id:"fillText",level:3},{value:"measureText()",id:"measureText",level:3},{value:"getImageData()",id:"getImageData",level:3},{value:"lineTo()",id:"lineTo",level:3},{value:"moveTo()",id:"moveTo",level:3},{value:"rect()",id:"rect",level:3},{value:"roundRect()",id:"roundRect",level:3},{value:"putImageData()",id:"putImageData",level:3},{value:"quadraticCurveTo()",id:"quadraticCurveTo",level:3},{value:"restore()",id:"restore",level:3},{value:"rotate()",id:"rotate",level:3},{value:"save()",id:"save",level:3},{value:"scale()",id:"scale",level:3},{value:"setLineDash()",id:"setLineDash",level:3},{value:"getLineDash()",id:"getLineDash",level:3},{value:"setTransform()",id:"setTransform",level:3},{value:"stroke()",id:"stroke",level:3},{value:"strokeText()",id:"strokeText",level:3},{value:"transform()",id:"transform",level:3},{value:"translate()",id:"translate",level:3}];function d(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,l.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.header,{children:(0,i.jsx)(n.h1,{id:"context",children:"Context"})}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-javascript",children:"new Konva.Context(config)\n"})}),"\n",(0,i.jsxs)(n.p,{children:["Konva wrapper around native 2d canvas context. It has almost the same API of 2d context with some additional functions. With core Konva shapes you don't need to use this object. But you will use it if you want to create a ",(0,i.jsx)(n.a,{href:"/docs/react/Custom_Shape.html",children:"custom shape"})," or a ",(0,i.jsx)(n.a,{href:"/docs/events/Custom_Hit_Region.html",children:"custom hit regions"}),". For full information about each 2d context API use ",(0,i.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D",children:"MDN documentation"})]}),"\n",(0,i.jsx)(n.h2,{id:"own-methods",children:"Own Methods"}),"\n",(0,i.jsx)(n.h3,{id:"fillShape",children:"fillShape(shape)"}),"\n",(0,i.jsx)(n.p,{children:"fill shape"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.strong,{children:"Parameters:"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"shape"})," (Konva.Shape)"]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"strokeShape",children:"strokeShape(shape)"}),"\n",(0,i.jsx)(n.p,{children:"stroke shape"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.strong,{children:"Parameters:"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"shape"})," (Konva.Shape)"]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"fillStrokeShape",children:"fillStrokeShape(shape)"}),"\n",(0,i.jsx)(n.p,{children:"fill then stroke"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.strong,{children:"Parameters:"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"shape"})," (Konva.Shape)"]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"reset",children:"reset()"}),"\n",(0,i.jsx)(n.p,{children:"reset canvas context transform"}),"\n",(0,i.jsx)(n.h3,{id:"getCanvas",children:"getCanvas()"}),"\n",(0,i.jsx)(n.p,{children:"get canvas wrapper"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Returns:"})," ",(0,i.jsx)(n.code,{children:"Konva.Canvas"})]}),"\n",(0,i.jsx)(n.h3,{id:"clear",children:"clear(bounds)"}),"\n",(0,i.jsx)(n.p,{children:"clear canvas"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.strong,{children:"Parameters:"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"bounds"})," (Object) (optional)"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"bounds.x"})," (Number) (optional)"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"bounds.y"})," (Number) (optional)"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"bounds.width"})," (Number) (optional)"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"bounds.height"})," (Number) (optional)"]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"arc",children:"arc()"}),"\n",(0,i.jsx)(n.p,{children:"arc function."}),"\n",(0,i.jsx)(n.h3,{id:"arcTo",children:"arcTo()"}),"\n",(0,i.jsx)(n.p,{children:"arcTo function."}),"\n",(0,i.jsx)(n.h3,{id:"beginPath",children:"beginPath()"}),"\n",(0,i.jsx)(n.p,{children:"beginPath function."}),"\n",(0,i.jsx)(n.h3,{id:"bezierCurveTo",children:"bezierCurveTo()"}),"\n",(0,i.jsx)(n.p,{children:"bezierCurveTo function."}),"\n",(0,i.jsx)(n.h3,{id:"clearRect",children:"clearRect()"}),"\n",(0,i.jsx)(n.p,{children:"clearRect function."}),"\n",(0,i.jsx)(n.h3,{id:"closePath",children:"closePath()"}),"\n",(0,i.jsx)(n.p,{children:"closePath function."}),"\n",(0,i.jsx)(n.h3,{id:"createImageData",children:"createImageData()"}),"\n",(0,i.jsx)(n.p,{children:"createImageData function."}),"\n",(0,i.jsx)(n.h3,{id:"createLinearGradient",children:"createLinearGradient()"}),"\n",(0,i.jsx)(n.p,{children:"createLinearGradient function."}),"\n",(0,i.jsx)(n.h3,{id:"createPattern",children:"createPattern()"}),"\n",(0,i.jsx)(n.p,{children:"createPattern function."}),"\n",(0,i.jsx)(n.h3,{id:"createRadialGradient",children:"createRadialGradient()"}),"\n",(0,i.jsx)(n.p,{children:"createRadialGradient function."}),"\n",(0,i.jsx)(n.h3,{id:"drawImage",children:"drawImage()"}),"\n",(0,i.jsx)(n.p,{children:"drawImage function."}),"\n",(0,i.jsx)(n.h3,{id:"ellipse",children:"ellipse()"}),"\n",(0,i.jsx)(n.p,{children:"ellipse function."}),"\n",(0,i.jsx)(n.h3,{id:"isPointInPath",children:"isPointInPath()"}),"\n",(0,i.jsx)(n.p,{children:"isPointInPath function."}),"\n",(0,i.jsx)(n.h3,{id:"fillRect",children:"fillRect()"}),"\n",(0,i.jsx)(n.p,{children:"fillRect function."}),"\n",(0,i.jsx)(n.h3,{id:"strokeRect",children:"strokeRect()"}),"\n",(0,i.jsx)(n.p,{children:"strokeRect function."}),"\n",(0,i.jsx)(n.h3,{id:"fillText",children:"fillText()"}),"\n",(0,i.jsx)(n.p,{children:"fillText function."}),"\n",(0,i.jsx)(n.h3,{id:"measureText",children:"measureText()"}),"\n",(0,i.jsx)(n.p,{children:"measureText function."}),"\n",(0,i.jsx)(n.h3,{id:"getImageData",children:"getImageData()"}),"\n",(0,i.jsx)(n.p,{children:"getImageData function."}),"\n",(0,i.jsx)(n.h3,{id:"lineTo",children:"lineTo()"}),"\n",(0,i.jsx)(n.p,{children:"lineTo function."}),"\n",(0,i.jsx)(n.h3,{id:"moveTo",children:"moveTo()"}),"\n",(0,i.jsx)(n.p,{children:"moveTo function."}),"\n",(0,i.jsx)(n.h3,{id:"rect",children:"rect()"}),"\n",(0,i.jsx)(n.p,{children:"rect function."}

1),"\n",(0,i.jsx)(n.h3,{id:"roundRect",children:"roundRect()"}),"\n",(0,i.jsx)(n.p,{children:"roundRect function."}),"\n",(0,i.jsx)(n.h3,{id:"putImageData",children:"putImageData()"}),"\n",(0,i.jsx)(n.p,{children:"putImageData function."}),"\n",(0,i.jsx)(n.h3,{id:"quadraticCurveTo",children:"quadraticCurveTo()"}),"\n",(0,i.jsx)(n.p,{children:"quadraticCurveTo function."}),"\n",(0,i.jsx)(n.h3,{id:"restore",children:"restore()"}),"\n",(0,i.jsx)(n.p,{children:"restore function."}),"\n",(0,i.jsx)(n.h3,{id:"rotate",children:"rotate()"}),"\n",(0,i.jsx)(n.p,{children:"rotate function."}),"\n",(0,i.jsx)(n.h3,{id:"save",children:"save()"}),"\n",(0,i.jsx)(n.p,{children:"save function."}),"\n",(0,i.jsx)(n.h3,{id:"scale",children:"scale()"}),"\n",(0,i.jsx)(n.p,{children:"scale function."}),"\n",(0,i.jsx)(n.h3,{id:"setLineDash",children:"setLineDash()"}),"\n",(0,i.jsx)(n.p,{children:"setLineDash function."}),"\n",(0,i.jsx)(n.h3,{id:"getLineDash",children:"getLineDash()"}),"\n",(0,i.jsx)(n.p,{children:"getLineDash function."}),"\n",(0,i.jsx)(n.h3,{id:"setTransform",children:"setTransform()"}),"\n",(0,i.jsx)(n.p,{children:"setTransform function."}),"\n",(0,i.jsx)(n.h3,{id:"stroke",children:"stroke()"}),"\n",(0,i.jsx)(n.p,{children:"stroke function."}),"\n",(0,i.jsx)(n.h3,{id:"strokeText",children:"strokeText()"}),"\n",(0,i.jsx)(n.p,{children:"strokeText function."}),"\n",(0,i.jsx)(n.h3,{id:"transform",children:"transform()"}),"\n",(0,i.jsx)(n.p,{children:"transform function."}),"\n",(0,i.jsx)(n.h3,{id:"translate",children:"translate()"}),"\n",(0,i.jsx)(n.p,{children:"translate function."})]})}function h(e={}){const{wrapper:n}={...(0,l.R)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(d,{...e})}):d(e)}},8453(e,n,t){t.d(n,{R:()=>r,x:()=>s});var a=t(6540);const i={},l=a.createContext(i);function r(e){const n=a.useContext(l);return a.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function s(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),a.createElement(l.Provider,{value:n},e.children)}}}]);