Today I messed around with something called “canvas inline”. Let me tell you, it was a bit of a head-scratcher at first, but I finally got it sorted.
So, I wanted to get a canvas element to sit nicely inline with some text. You know, like an image would. I thought, “This should be easy, right?” Wrong! By default, canvas acts like a block-level element, taking up the whole width of its container and pushing everything else below it.
First, I tried simply adding the canvas to my HTML, like this:
- First attempt
`
Here’s some text. And some more text.
`
That did not work as I expected, the canvas acted like a block element and pushed the text to the next line.
Then, I remembered about the magic of CSS. I figured I could just set the canvas’s display property to “inline”, like this:
- Second attempt
`
canvas {
display: inline;
`
Added this to the “ section.
Tried this, refreshed the browser and it did work, but there was still a little space under the canvas, and the text after the canvas was not aligned with the bottom of it. It felt like there is some extra margin or padding below the canvas.
After doing some research and digging, I realized that I had to adjust the `vertical-align` property. I set it to “bottom”:
- Final try
`
canvas {
display: inline;
vertical-align: bottom;
`
Changed my CSS, refreshed again, and boom! It worked perfectly! The canvas now sat inline with the text, all nice and aligned. No more weird spacing.
So, there you have it. If you want to put a canvas inline with text, just set its display to “inline” and its vertical-align to “bottom” in your CSS.
Learned a lesson today!
It seems like a small thing, but it’s these little details that can make a big difference in web development. Don’t be afraid to experiment and keep learning!