Display Datamatrix in canvas

[Z.A Jafari]

Hi there,

I am using the Angular barcode to design my 2D data matrix barcode in a specific size. I have a canvas with a specific size and want the barcode to fit in it using the top.botton,left.right feature. 

I want to know how can I have the barcode generate in the canvas and then I play with the left,right,bottom,top margin to fit where I need exactly.

cheers

Zolf

Below is the code

<div fxFlex.gt-sm="calc(50% - 0.75rem)" fxFlex="100">
    <div class="mrgn-b-md">
        <h2 class="mrgn-b-md">{{'Preview Label'|translate}}</h2>
        <div class="inner-block">
            <div fxLayout="row" fxLayoutAlign="start center" style="width: 100%;">
                <div fxFlex>
                    <canvas #myCanvas>
                        Your browser does not support the canvas element.
                    </canvas>
                    <br/>
                    <ejs-datamatrixgenerator style="display: block;"  #barcode id="barcode" [displayText] = 'displayTextMethod' width="200px" height="200px" mode="SVG"
                                             type="DataMatrix" value="Testing">
                    </ejs-datamatrixgenerator>
                </div>
            </div>
        </div>
    </div>
</div>

scss file

canvas {
  width:151.1811px;
  height:75.5906px;
  border:1px solid #c3c3c3;
}

[Vivisa Ganesan]

Hi,

It is not possible to add syncfusion barcode component inside the canvas tag, but you can render barcode as a canvas by setting mode as "Canvas". refer to the below code example

Code-snippet:

mode = ”Canvas”

Regards,

Vivisa

[Z.A Jafari]

thanks for your comments. 

One question, why the datamatrix barcode is not generated when I select a size of 14x14 or below in the demo

Can you please send me the link to the API documentation for the Angular syncfusion. Appreciate your help.

[Vivisa Ganesan]

Hi,

We will validate and update you with more details on May 04, 2023.

Regards,

Vivisa

[Vivisa Ganesan]

Hi,

This is sample level issue. We have modified the sample as per your requirement. Please refer the sample below.

API Documentation: https://ej2.syncfusion.com/angular/documentation/api/diagram/

Sample:

https://stackblitz.com/edit/angular-puxk4a-jl8mv5?file=src%2Fapp.component.html

Regards,

Vivisa