Atozed Forums
IWCanvas - Printable Version

+- Atozed Forums (
+-- Forum: Atozed Software Products (
+--- Forum: IntraWeb (
+---- Forum: English (
+----- Forum: IntraWeb General Discussion (
+----- Thread: IWCanvas (/thread-284.html)

IWCanvas - UdoBausch - 05-28-2018

I want to implement some grafic-objects in my IntraWeb-Application
Last year you announced a IWCanvas component in V14 In my distribution of V14.2.7 I am missing this
– using this it will be perfect for me ( - I made some handcrafted examples - )
But I could not place it in the <Body>-part of the IWForm (extra code I can place in IWForm.JavaScript, but this appears out of HTML-<Body>, but it is usable also)
For me IWCanvas only needs to have the following the following properties:
JavaScript: TStringList
If it is possible to place it in a IWRegion we can use this to define
IWCanvas.RenderHTML should create
<canvas id="RainbowStrokeStyleSample1" width=320px height=120px> </canvas>
<script> //JavaScript
  var context = document.getElementById('RainbowStrokeStyleSample1').getContext('2d');
  // 1. set strokeStyle to a linear gradient value
  var rainbowGradient = context.createLinearGradient (0, 60, 320, 60);
  rainbowGradient.addColorStop (0,    'red');
  rainbowGradient.addColorStop (0.25, 'yellow');
  rainbowGradient.addColorStop (0.5,  'green');
  rainbowGradient.addColorStop (0.75, 'blue');
  rainbowGradient.addColorStop (1,    'violet');
  context.strokeStyle = rainbowGradient;
  // 2. draw a kind of half cirlce on the left           
  context.moveTo (60, 10);
  context.lineTo (60, 110);
  context.bezierCurveTo (0, 110, 0, 10, 60, 10);
  // 3. draw a rectangle on the right top
  context.strokeRect (80, 10, 230, 30);
  // 4. set the text font and write 'Hello!' on the right bottom of the canvas
  context.font = '60pt sans-serif';
  context.strokeText ('Hello!', 80, 110); 
Currently I need no Events for IWCanvas – but if events are inherited it can be useful too
I think it should not be not very complicated for you to implement IWCanvas in IntraWEB.V14
Please give me feedback about this proposal to enable me to plan my next steps
  • If you need some tester – I am willing to do this job
Or do you have an idea to solve this in an alternative way ?
Thankyou in advance

RE: IWCanvas - Jose Nilton Pace - 05-28-2018

Hi UdoBausch, you can use template do to this, is very easy. I use graphic very similar to you.

var pieTicket = document.getElementById("pieChart-ticket").getContext('2d');
var myPieTicket = new Chart(pieTicket, {
      type: 'doughnut',
     data: {

RE: IWCanvas - Jose Nilton Pace - 05-28-2018

Quote:Thankyou for this tipp - it seems to go in the right direction.
But I have a question:
how do you create pieChart-ticket in HTML-<Body>
- or do you use an other existing IW-Object ?

Yes, i create in body.
<!DOCTYPE html>
   <div class="wrapper">

   <!-- Placed at the end of the document so the pages load faster -->
     var pieTicket = document.getElementById("pieChart-ticket").getContext('2d');
     var myPieTicket = new Chart(pieTicket, {
       type: 'doughnut',
       data: {


RE: IWCanvas - UdoBausch - 05-28-2018

Perhaps the question is to easy - (but not for me)
How do you create "pieChart-ticket" ?

RE: IWCanvas - Jose Nilton Pace - 05-28-2018

(05-28-2018, 08:01 PM)UdoBausch Wrote: Perhaps the question is to easy - (but not for me)
How do you create "pieChart-ticket" ?

Sorry, i forget the html part:
<hr class="divider">
<p class="text-center"><strong>Prioridade</strong></p>
<div class="box-body">
 <div class="row">
   <div class="col-md-8">
     <div class="chart-responsive">
       <canvas id="pieChart-ticket" height="160" width="208"></canvas>
     <!-- ./chart-responsive -->
   <!-- /.col -->