Forum How do I...?

Canvas

mark_anderson_us
Hi Guys

I have an XSL that generates HTML and it uses the canvas. I tried with PrinceXML (to PDF) and the canvases don't show. I can;t find any documentation on canvas. Anyone got any idea what I'm doing wrong?

Nodeset for test

<!-- Sample XML Nodes -->
    <xsl:variable name="canvas">
        <canvas width="970" height="380">
            <tile>
                <id>1</id>
                <type>Press Section</type>
                <top>10</top>
                <left>10</left>
                <height>100</height>
                <width>200</width>
                <part_ref/>
                <task_ref/>
                <comp_id/>
                <inputs/>
                <output>3</output>
                <color>LightGreen</color>
                <!-- for demo only. Can be derived from part_ref, task_ref or comp_id -->
                <name>4pp Cover</name>
                <process>Section</process>
                <net_copies>50000</net_copies>
                <waste_percent>0</waste_percent>
            </tile>
            <tile>
                <id>2</id>
                <type>Component</type>
                <top>140</top>
                <left>10</left>
                <height>100</height>
                <width>200</width>
                <part_ref/>
                <task_ref/>
                <comp_id/>
                <inputs/>
                <output>4</output>
                <color>LightGreen</color>
                <!-- for demo only. Can be derived from part_ref, task_ref or comp_id -->
                <name>3pp text</name>
                <process>Section</process>
                <net_copies>50000</net_copies>
                <waste_percent>0</waste_percent>
            </tile>
            <tile>
                <id>3</id>
                <type>Press</type>
                <top>10</top>
                <left>250</left>
                <height>100</height>
                <width>200</width>
                <part_ref/>
                <task_ref/>
                <comp_id/>
                <inputs>
                    <input>1</input>
                </inputs>
                <output>7</output>
                <color>LightBlue</color>
                <!-- for demo only. Can be derived from part_ref, task_ref or comp_id -->
                <name>Komori 16pp</name>
                <process>Press</process>
                <net_copies>51000</net_copies>
                <waste_percent>5</waste_percent>
            </tile>
            <tile>
                <id>4</id>
                <type>Press</type>
                <top>140</top>
                <left>250</left>
                <height>100</height>
                <width>200</width>
                <part_ref/>
                <task_ref/>
                <comp_id/>
                <inputs>
                    <input>2</input>
                </inputs>
                <output>6</output>
                <color>LightBlue</color>
                <!-- for demo only. Can be derived from part_ref, task_ref or comp_id -->
                <name>Goss Sunday 2000</name>
                <process>Press</process>
                <net_copies>51000</net_copies>
                <waste_percent>10</waste_percent>
            </tile>
            <tile>
                <id>6</id>
                <type>Finishing</type>
                <top>140</top>
                <left>500</left>
                <height>100</height>
                <width>200</width>
                <part_ref/>
                <task_ref/>
                <comp_id/>
                <inputs>
                    <input>4</input>
                </inputs>
                <output>7</output>
                <color>LightSalmon</color>
                <!-- for demo only. Can be derived from part_ref, task_ref or comp_id -->
                <name>MBO Folder</name>
                <process>Folding</process>
                <net_copies>51000</net_copies>
                <waste_percent>10</waste_percent>
            </tile>
            <tile>
                <id>7</id>
                <type>Finishing</type>
                <top>140</top>
                <left>750</left>
                <height>100</height>
                <width>200</width>
                <part_ref/>
                <task_ref/>
                <comp_id/>
                <inputs>
                    <input>5</input>
                    <input>6</input>
                </inputs>
                <output/>
                <color>LightSalmon</color>
                <!-- for demo only. Can be derived from part_ref, task_ref or comp_id -->
                <name>Mueller Martini Inserter</name>
                <process>Inserting</process>
                <net_copies>51000</net_copies>
                <waste_percent>10</waste_percent>
            </tile>
            <tile>
                <id>8</id>
                <type>Component</type>
                <top>270</top>
                <left>10</left>
                <height>100</height>
                <width>200</width>
                <part_ref/>
                <task_ref/>
                <comp_id/>
                <inputs/>
                <output>9</output>
                <color>LightGreen</color>
                <!-- for demo only. Can be derived from part_ref, task_ref or comp_id -->
                <name>3pp text</name>
                <process>Section</process>
                <net_copies>50000</net_copies>
                <waste_percent>0</waste_percent>
            </tile>
            <tile>
                <id>9</id>
                <type>Press</type>
                <top>270</top>
                <left>250</left>
                <height>100</height>
                <width>200</width>
                <part_ref/>
                <task_ref/>
                <comp_id/>
                <inputs>
                    <input>8</input>
                </inputs>
                <output>10</output>
                <color>LightBlue</color>
                <!-- for demo only. Can be derived from part_ref, task_ref or comp_id -->
                <name>Komori 16pp</name>
                <process>Press</process>
                <net_copies>51000</net_copies>
                <waste_percent>5</waste_percent>
            </tile>
            
            <tile>
                <id>10</id>
                <type>Finishing</type>
                <top>270</top>
                <left>500</left>
                <height>100</height>
                <width>200</width>
                <part_ref/>
                <task_ref/>
                <comp_id/>
                <inputs>
                    <input>9</input>
                </inputs>
                <output>7</output>
                <color>LightSalmon</color>
                <!-- for demo only. Can be derived from part_ref, task_ref or comp_id -->
                <name>MBO Folder</name>
                <process>Folding</process>
                <net_copies>51000</net_copies>
                <waste_percent>5</waste_percent>
            </tile>
            
        </canvas>
    </xsl:variable>
    <!-- End sample data -->


XSL
 <!-- Simple lines -->
            <h1 style="page-break-before: always;">HTML Canvas with Simple Lines</h1>
                <xsl:element name="canvas">
                    <xsl:attribute name="id">MarksCanvas</xsl:attribute>
                    <xsl:attribute name="width"><xsl:value-of select="msxsl:node-set($canvas)/canvas/@width"/></xsl:attribute>
                    <xsl:attribute name="height"><xsl:value-of select="msxsl:node-set($canvas)/canvas/@height"/></xsl:attribute>
                </xsl:element>
                
                <xsl:element name="script">
                    var canvas = document.getElementById('MarksCanvas');
                    var context = canvas.getContext('2d');
                    
                    context.rect(10,0,<xsl:value-of select="msxsl:node-set($canvas)/canvas/@width"/>,<xsl:value-of select="msxsl:node-set($canvas)/canvas/@height"/>);
                    context.fillStyle="LightYellow";
                    context.fill();
                    
                    
                  
                    
                    <xsl:for-each select="msxsl:node-set($canvas)/canvas/tile">
                        <xsl:variable name="output_tile_no" select="output"/>
                        context.beginPath();
                        context.rect(<xsl:value-of select="left"/>, <xsl:value-of select="top"/>, <xsl:value-of select="width"/>, <xsl:value-of select="height"/>);
                        context.fillStyle = '<xsl:value-of select="color"/>';
                        context.fill();
                        context.lineWidth = 1;
                        context.strokeStyle = 'black';
                        context.stroke();
                        
                        <xsl:if test="normalize-space(output)">
                        context.beginPath();
                        context.moveTo(<xsl:value-of select="left + width"/>, <xsl:value-of select="top + (height div 2)"/>);
                        context.lineTo(<xsl:value-of select="../tile[id = $output_tile_no]/left"/>,<xsl:value-of select="../tile[id = $output_tile_no]/top + (../tile[id = $output_tile_no]/height div 2)"/>);
                        
                        context.stroke();
                        </xsl:if>
                    </xsl:for-each>



mikeday
Could you attach the generated HTML that you are passing to Prince?
mark_anderson_us
Hi mike

Here's a snippet with one rectangle, one line and a few lines of text

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:msxsl="urn:schemas-microsoft-com:xslt">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
        <style type="text/css">
            @page {
                size:11in 8.5in;
                margin-top:0.02in;
                margin-bottom:0.2in;
                margin-left:0.2in;
                margin-right:0.2in;
            }
            body{
                font-family:Verdana, Arial, Helvetica, sans-serif;
                font-size:10px;
            }
            .tile{
                position:absolute;
                padding:2px;
                border-radius:5px;
            }
            .canvas{
                position:relative;
                background-color:LightYellow;
                border:1px solid black;
                border-radius:5px;
            }
            .waste{
                text-align:right;
            }
            .type{
                font-weight:600;
            }
            .next{
                font-weight:600;
                text-align:right;
            }
            div.tile table{
                width:100%;
            }
            div.tile table tr td{
                width:50%;
            }
            div.tile table tr td + td{
                width:50%;
            }</style>
    </head>
    <body>
        <h1 style="page-break-before: always;">HTML Canvas with Smarter Lines and Text</h1>
        <canvas id="MarksCanvas3" width="970" height="380"></canvas>
        <script>
                    var canvas = document.getElementById('MarksCanvas3');
                    var context = canvas.getContext('2d');
                    
                    
                    
                    context.rect(10,0,970,380);
                    context.fillStyle="LightYellow";
                    context.fill();
                    
                                      
                    
                    
                        context.beginPath();
                        context.rect(10, 10, 200, 100);
                        context.fillStyle = 'LightGreen';
                        context.fill();
                        context.lineWidth = 1;
                        context.strokeStyle = 'black';
                        context.stroke();
                        
                        
                        context.beginPath();
                        context.moveTo(210, 60);
                        context.lineTo(250,60);
                        context.stroke();
                        
                        context.textAlign="start"; 
                        context.fillStyle="black";
                        context.font="bold 12px sans-serif";
                        context.fillText("1 Press Section",15,25);
                        context.font="12px sans-serif";
                        context.fillText("Section",15,45);
                        context.fillText("4pp Cover",15,65);
                        context.fillText("Net: 50,000",15,85);
                        context.textAlign="end"; 
                        context.fillText("Waste: 0.00%",205,85);
                        
                        context.fillText("Next: 3",205,105);
                        
                       
                        </script>
    </body>
</html>

mark_anderson_us
Hi Mike

So, I just tried this and it worked fine converting manually in Prince. I'm using the prince engine with a 3rd party product (it calls the prince dll). I'll test just this bit tomorrow. Should be the same though, right?
mikeday
The main thing is to ensure that JavaScript is enabled; each wrapper has a method for that.