jQWidgets jqxDraw renderEngine Property

Last Updated : 07 Feb, 2022

jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxDraw is a small jQuery-based plugin that is used to draw shapes and texts using VML, SVG, and HTML.

The renderEngine property is used for showing the chart. The property’s possible values are ‘SVG’, ‘VML’ and ‘HTML5’. When the value for this property is not set, then this widget will automatically select an optimal rendering engine depending on the browser capabilities. It is of string type & its default value is “

Syntax:

$('#jqxDraw').jqxDraw({renderEngine: 'HTML5'});

Linked Files: Download jQWidgets from the given link. In the HTML file, locate the script files in the downloaded folder.

<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdraw.js”></script>

Example: The below example illustrates the jQWidgets jqxDraw renderEngine property.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link rel="stylesheet" href= 
          "jqwidgets/styles/jqx.base.css" type="text/css" /> 
    <script type="text/javascript" src= 
            "jqwidgets/jqxcore.js"> 
    </script> 
    <script type="text/javascript" src= 
            "jqwidgets/jqxdraw.js"> 
    </script> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green;"> 
            GeeksforGeeks 
        </h1> 
        <h3>jQWidgets jqxDraw renderEngine Property</h3> 
        <div id="jqx_Draw" style="height:200px; width:280px;"> 
        </div> 
        <script type="text/javascript"> 
            $(document).ready(function () { 
                $('#jqx_Draw').jqxDraw({ 
                    renderEngine: 'HTML5' 
                }); 
                var Instance = $('#jqx_Draw').jqxDraw('getInstance'); 
                Instance.circle(150, 100, 65, { fill: 'green' }); 
                Instance.refresh(); 
            }); 
        </script> 
    </center> 
</body> 
  
</html>