enum DrawRenderEngine {
     SVG,
     VML,
     HTML5
}

Sets or gets the renderEngine property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDraw #myDraw 
            [width]="850" [height]="500" [renderEngine]="'HTML5'">
        </jqxDraw>
    `
})
 
export class AppComponent {
    
} 

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDraw #myDraw 
            [width]="850" [height]="500">
        </jqxDraw>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDraw') myDraw: jqxDrawComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myDraw.attr(element, { fill: 'lightblue', stroke: 'darkblue' });
    }

    
} 
							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDraw #myDraw 
            [width]="850" [height]="500">
        </jqxDraw>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDraw') myDraw: jqxDrawComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myDraw.circle(250, 150, 50, {});
    }

    
} 
							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDraw #myDraw 
            [width]="850" [height]="500">
        </jqxDraw>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDraw') myDraw: jqxDrawComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myDraw.clear();
    }

    
} 
							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDraw #myDraw 
            [width]="850" [height]="500">
        </jqxDraw>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDraw') myDraw: jqxDrawComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myDraw.getAttr(element, 'fill');
    }

    
} 
							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDraw #myDraw 
            [width]="850" [height]="500">
        </jqxDraw>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDraw') myDraw: jqxDrawComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myDraw.getSize();
    }

    
} 
							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDraw #myDraw 
            [width]="850" [height]="500">
        </jqxDraw>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDraw') myDraw: jqxDrawComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myDraw.line(600, 100, 600, 200, { stroke: 'blue', 'stroke-width': 6 });
    }

    
} 
							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDraw #myDraw 
            [width]="850" [height]="500">
        </jqxDraw>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDraw') myDraw: jqxDrawComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myDraw.measureText('My text', 45, { 'class': 'smallText' });
    }

    
} 
							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDraw #myDraw 
            [width]="850" [height]="500">
        </jqxDraw>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDraw') myDraw: jqxDrawComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myDraw.on(element, 'click', () => { });
    }

    
} 
							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDraw #myDraw 
            [width]="850" [height]="500">
        </jqxDraw>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDraw') myDraw: jqxDrawComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myDraw.off(element, 'click', () => { });
    }

    
} 
							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDraw #myDraw 
            [width]="850" [height]="500">
        </jqxDraw>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDraw') myDraw: jqxDrawComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myDraw.path(M 100,100 L 150,130 C 130,130 180,190 150,150, { stroke: '#777777', fill: 'red' });
    }

    
} 
							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDraw #myDraw 
            [width]="850" [height]="500">
        </jqxDraw>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDraw') myDraw: jqxDrawComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myDraw.pieslice(250, 150, 50, 100, 15, 95, 0, {fill: 'yellow'});
    }

    
} 
							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDraw #myDraw 
            [width]="850" [height]="500">
        </jqxDraw>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDraw') myDraw: jqxDrawComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myDraw.refresh();
    }

    
} 
							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDraw #myDraw 
            [width]="850" [height]="500">
        </jqxDraw>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDraw') myDraw: jqxDrawComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myDraw.rect(0, 0, 200, 100, { stroke: '#777777', fill: 'transparent' });
    }

    
} 
							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDraw #myDraw 
            [width]="850" [height]="500">
        </jqxDraw>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDraw') myDraw: jqxDrawComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myDraw.saveAsJPEG('myImage.jpeg', 'http:///export_server/server.php');
    }

    
} 
							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDraw #myDraw 
            [width]="850" [height]="500">
        </jqxDraw>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDraw') myDraw: jqxDrawComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myDraw.saveAsPNG('myImage.png', 'http:///export_server/server.php');
    }

    
} 
							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDraw #myDraw 
            [width]="850" [height]="500">
        </jqxDraw>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDraw') myDraw: jqxDrawComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myDraw.text('Drawing Shapes', 50, 20, undefined, undefined, 0, { 'class': 'largeText', fill: 'yellow', stroke: 'orange' }, false, 'center', 'center', 'centermiddle');
    }

    
}