We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Display Datamatrix in canvas

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

barcode.jpg

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;
}



4 Replies

VG Vivisa Ganesan Syncfusion Team April 27, 2023 01:40 PM UTC

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



ZJ Z.A Jafari April 29, 2023 05:42 AM UTC

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.


2023-04-29_09-07-59.jpg



VG Vivisa Ganesan Syncfusion Team May 2, 2023 12:41 PM UTC

Hi,

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


Regards,

Vivisa



VG Vivisa Ganesan Syncfusion Team May 3, 2023 12:46 PM UTC

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


Loader.
Live Chat Icon For mobile
Up arrow icon