Example canvas html5
unknown
html
4 years ago
1.6 kB
7
Indexable
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Show Card Template</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <style> svg,img,canvas{ border-radius: 15px; } h6{ padding-top: 10px; padding-bottom: 10px; } </style> </head> <body> <div class="container" style="margin-top:10px;"> <div class="row"> <div class="col-md-6"> <h6>Canvas</h6> <canvas id="canva-card" width="{{$table->template->size->width}}" height="{{$table->template->size->height}}"></canvas> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script src="{{asset('assets/js/fabricjs/fabric.min.js')}}"></script> <script> $(document).ready(function(){ var canvas = new fabric.Canvas('canva-card'); var json = card.canvas; var width = card.template.size.width; var height = card.template.size.height; canvas.setWidth(width); canvas.setHeight(height); canvas.loadFromJSON(json, function() { canvas.renderAll(); }); }) </script> </body> </html>
Editor is loading...