Resizing your canvas drawings properly using repaint

-
This post will be a short one attending a problem I briefly touched upon in my previous post on animation using canvas. We live in a "mobile first" world and need to pay attention to responsive designing.



Try as you might resizing your canvas using CSS you are in for a disappointing surprise. Especially if you are rendering text, it will look all chunky and broken. My solution to this problem is to calculate a factor value based on the window and canvas width. Using this value, I can multiply it with all xes and ys and lengths and widths and so on and keep the relative positions all these shapes have to each other. 
var ic = window.innerWidth / (canvas.width * 1.2) > 1 ? 1 : window.innerWidth / (canvas.width * 1.2);
When adding objects I apply the factor to keep the relative positions. 
var customShapes = [];

// Figures - Balls
customShapes.push({ x: ic * (canvas.width / 2 - 58),  minRadius: 0, maxRadius: ic * (3), y: ic * (canvas.height / 4 - 152), borderThickness: ic * (11), borderColor: ringBlue, color: ringBlue, runAnimation: !0, speed: 2.4 });
customShapes.push({ x: ic * (canvas.width / 2 - 117), minRadius: 0, maxRadius: ic * (3), y: ic * (canvas.height / 4 - 102), borderThickness: ic * (3),  borderColor: ringBlue, color: ringBlue, runAnimation: !0, speed: 3 });
customShapes.push({ x: ic * (canvas.width / 2 + 43),  minRadius: 0, maxRadius: ic * (3), y: ic * (canvas.height / 4 - 150), borderThickness: ic * (7),  borderColor: ringBlue, color: ringBlue, runAnimation: !0, speed: 1 });
...
...
...
Now, make sure to use the windows.resize event to kick off the rerendering of your canvas. The result is a world apart from the CSS approach.

Comments

Post a Comment

Popular posts from this blog

Power Pages Manifest Explained related to Collaborative Development and ALM

-
In the Microsoft Power Pages, understanding the nuances of configuration files like the `manifest.yml` and environment-specific manifests (e.g., `dev.crm4.dynamics.com-manifest.yml`) is crucial. These files play a significant role in managing and deploying Power Pages sites, particularly in collaborative and ALM contexts. Understanding the Manifest.yml File First of all, always refer to the official documentation on how the power platform cli tool is supported. Creation and Usage Creation : The manifest.yml is generated through the pac powerpages download command. It serves as a snapshot of the Power Pages site's configuration, capturing details like page templates, form settings, and access permissions. Example: When you run this command, it creates a manifest.yml file that includes details of all the components such as web forms, entity lists, and site settings configured in the Power Pages site. Usage : The pac powerpages upload command utilizes the manifest.yml file to updat...
Read more

Exploring the Power of Variables in Liquid and Power Pages

-
Covering the basics - Variables As a templating language, Liquid offers a rich collection of possibilities for web developers and designers, bringing Dynamics business data to the web. Variables in Liquid enable us to display dynamic content and enable us to implement a certain level of custom logic as well. We'll have a look at some examples on how to work with variables. Variable Assignment In Liquid, variables can be assigned values using the {% assign %} tag. For example, let's assign the value "Hello, Nerd!" to the variable greeting: {% assign greeting = 'Hello, Nerd!' %} Variable Output Once a variable is assigned a value, it can be outputted using the {{ }} syntax. To display the value of greeting, we can use: {{ greeting }} Assigning Site Settings Liquid is powerfull enough to allow you to assign values from site settings to variables. For example, if you need the site setting for inactivity for ...
Read more

Create an interactive HTML5 Canvas using event handlers.

-
Image
You can use HTML5 Canvas as an alternative approach designing info graphics, branding graphics etc. Using the example in my previous blog post, I will add a clickable area on the canvas and use a JavaScript event handler to execute some logic. This is the result of the previous example. I want to pop an alert Box when clicking inside the logo. I need to create an object reflecting the coordinates I want my clickable zone to have. I’m also throwing in an id/name. var CustFigure = function (x, y, height, width, name ) { this.x = x; this.y = y; this.height = height; this.width = width; this.name = name; }; In this case I just create a global Array that I can pop the objects on to.   var custFigures = []; At some point (I choose to include it in the function drawing  the logo) we create the object with the desired coordinates and push it on to the array. var custFigure = new CustFigure(50, 50, 75+50, 75+50, " Hello ...
Read more