how to add functions to CanvasRenderingContext2D prototype in typescript

Question

I want to add a function on CanvasRenderingContext2D. what it does is to draw a circle text.

in javascript, all I need to do is write code like this:

CanvasRenderingContext2D.prototype.fillTextCircle = function () {
    //some code       
}

however it desen't work in typescript.

I also try these two methods:

1. add following code at the file header

interface CanvasRenderingContext2D {
    fillTextCircle: any;
}

CanvasRenderingContext2D.prototype.fillTextCircle = function () {
    //some code       
}

2. add this line in lib.dom.d.ts

interface CanvasRenderingContext2D extends CanvasState, CanvasTransform, CanvasCompositing, CanvasImageSmoothing, CanvasFillStrokeStyles, CanvasShadowStyles, CanvasFilters, CanvasRect, CanvasDrawPath, CanvasUserInterface, CanvasText, CanvasDrawImage, CanvasImageData, CanvasPathDrawingStyles, CanvasTextDrawingStyles, CanvasPath {
    readonly canvas: HTMLCanvasElement;
    fillTextCircle: any;   //add this line in lib.dom.d.ts
}

but it still complains this error:

Property 'fillTextCircle' does not exist on type 'CanvasRenderingContext2D'.

Please check other questions, see e.g. [here](https://stackoverflow.com/questions/32948271/extend-interface-defined-in-d-ts-file). — Stefan Hanke, Nov 21 '18 at 04:37
all right,I got it ! so I cannot modified the interface directly in lib.dom.d.ts.but I create a global.d.ts and add the following code: ` interface CanvasRenderingContext2D { fillTextCircle: any; } ` It works! — John, Nov 21 '18 at 06:44

score 0 · Accepted Answer · answered Nov 21 '18 at 06:46

0

just add a global.d.ts,and add the following code:

 interface CanvasRenderingContext2D {
    fillTextCircle: any;
}

It will work

link question

answered Nov 21 '18 at 06:46

John

645
1
8
23

how to add functions to CanvasRenderingContext2D prototype in typescript

1 Answers1