What's the difference between drawImage and drawString to draw pixels

Posted on Sun 7th, March 2021

• #1

tyronehell

I want to draw bitmap (buffer) data directly with inlineC and noticed that the method Graphics.drawImage() used the setPixel(...) to draw the bitmap (buffer) data at last in jswrap_graphics.c, but the method Graphics.drawString() is called graphicsFillRect() and graphicsFillRectDevice to draw and returned return gfx->fillRect(gfx, (int)x1, (int)y1, (int)x2, (int)y2, col), Why this way? What's the difference between the two and which one is more efficient to draw bitmap data?
• #2

Gordon

drawString uses graphicsFillRect because bitmap fonts can be 'scaled' - you can have a bitmap font scaled up by 4x in which case each 'pixel' is a 4x4 rect.

For drawing pixel by pixel, setPixel is the way to go.

However what device are you using InlineC on? For instance on Bangle.js it can make a lot of sense to have an offscreen buffer and to use Inline C to write direct into that buffer, and then use g.drawImage to draw that to the screen (drawImage has a special fast path for blits)

There's an example of that at https://github.com/espruino/BangleApps/blob/master/apps/geissclk/clock.js
• #3

tyronehell

Great!! @Gordon You just like a beacon in my mist! :)
I'm going to try

Post a reply
- Bold
- Italics
- Link
- Image
- List
- Quote
- code
- Preview
Formatting Help

Don't worry about formatting, just type in the text and we'll take care of making sense of it. We will auto-convert links, and if you put asterisks around words we will make them bold.

Tips:

Create headers by underlining text with ==== or ----

To *italicise* text put one asterisk each side of the word

To **bold** text put two asterisks each side of the word

Embed images by entering:
![](https://www.google.co.uk/images/srpr/logo4w.png)
That's the hard one: exclamation, square brackets and then the URL to the image in brackets.

* Create lists by starting lines with asterisks

1. Create numbered lists by starting lines with a number and a dot

> Quote text by starting lines with >

Mention another user by @username

For syntax highlighting, surround the code block with three backticks:

```
Your code goes here
```
Just like Github, a blank line must precede a code block.

If you upload more than 5 files we will display all attachments as thumbnails.

For a full reference visit the Markdown syntax.