Set texture pattern with image
The following example demonstrates how to set the texture pattern (hatch) display in a region
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>M2Diagram set texture pattern with image</title>
<script src="https://diagram.measuresquare.com/scripts/m2diag.js"></script>
</head>
<body>
<div style="text-align:center;margin-top:20px;">
<div id="canvas" style="width:750px;height:450px;border:1px solid #333;"></div>
</div>
<script>
let options = { apiKey: 'YOUR_PUBLISHABLE_API_KEY' };
let diag = new m2Diag.Engine('canvas', options);
let projectId = 'YOUR_PROJECT_ID';
diag.loadCloudData(projectId);
diag.state.onSelectShape = function (event, shape, point) {
if (shape)
diag.setTexture(shape.id, '/content/example.jpg');
// or set the texture with the size
// diag.setTexture(shape.id, '/content/example.jpg', '36"', '36"');
}
</script>
</body>
</html>