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>

Could you attach the generated HTML that you are passing to Prince?

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>

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?

The main thing is to ensure that JavaScript is enabled; each wrapper has a method for that.